/* La Pizza téma – generált a HTML-prototípusból. */
/* --------------------------------------------------------------------------
   1. TOKENS  → assets/css/tokens.css + theme.json (settings.color / typography)
   -------------------------------------------------------------------------- */
:root {
  /* Színek */
  --c-burgundy-900: #3d0f18;
  --c-burgundy-700: #5c1824;
  --c-burgundy-600: #6e1e2b;   /* elsődleges márkaszín */
  --c-burgundy-500: #85283a;
  --c-burgundy-100: #f3e3e3;
  --c-cream-50:  #fcf9f4;
  --c-cream-100: #f7f2ea;       /* oldal háttér */
  --c-sand-200:  #ece2d3;
  --c-sand-300:  #e0d2bd;
  --c-sand-500:  #b49d7f;
  --c-graphite-900: #1f1f22;
  --c-graphite-700: #2b2b2e;    /* törzsszöveg */
  --c-graphite-500: #5b5a5f;    /* másodlagos szöveg (AA a krémen) */
  --c-graphite-300: #a9a6a1;
  --c-white: #ffffff;
  --c-success: #2f6b3a;
  --c-success-bg: #e6f0e6;
  --c-warning: #8a5a00;
  --c-warning-bg: #fbf0d9;
  --c-error: #a3222f;
  --c-error-bg: #fbe9ea;

  /* Szemantikus aliasok */
  --color-bg: var(--c-cream-100);
  --color-surface: var(--c-cream-50);
  --color-surface-alt: var(--c-sand-200);
  --color-text: var(--c-graphite-700);
  --color-text-muted: var(--c-graphite-500);
  --color-primary: var(--c-burgundy-600);
  --color-primary-hover: var(--c-burgundy-700);
  --color-line: #dccfbd;
  --color-focus: #c2410c;

  /* Tipográfia */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  --fs-2xl: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);
  --fs-3xl: clamp(2.375rem, 1.6rem + 3.4vw, 4.25rem);
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  /* Térközök (4px-es skála) */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem;

  /* Formák */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(31, 31, 34, .06);
  --shadow: 0 6px 24px -10px rgba(61, 15, 24, .22);
  --shadow-lg: 0 20px 50px -20px rgba(61, 15, 24, .35);

  /* Layout */
  --container: 1240px;
  --gutter: clamp(1rem, 3vw, 2rem);
  --header-h: 72px;
  --transition: 180ms ease;
}