/* ============================================================
   Neo Cuisine — design tokens + self-hosted fonts
   ------------------------------------------------------------
   Every brand colour has ONE base token that the Customizer can
   override (--primary, --accent, --ink, --page-bg, --surface,
   --header-bg, --footer-bg). All lighter/darker steps are derived
   from it with color-mix(), so changing one colour in the
   Customizer re-themes the whole ramp — nothing stays on the
   shipped hue.
   ============================================================ */

/* ---- Outfit (display) — variable 300–800 ---- */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/outfit-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/outfit-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Figtree (body) — variable 300–800, normal + italic ---- */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/figtree-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/figtree-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/figtree-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/figtree-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Base colours (Customizer-controlled — keep in sync with
         the defaults in functions.php: neo_cuisine_color_defaults()) ---- */
  --primary:   #2A7D4F;   /* Kräutergrün */
  --accent:    #E4513A;   /* Tomatenrot */
  --ink:       #1F2A24;   /* Text */
  --page-bg:   #FFFFFF;   /* Seiten-Hintergrund */
  --surface:   #F3F7F2;   /* sanfte Flächen (Boxen, Bänder) */
  --header-bg: #FFFFFF;
  --footer-bg: #1F2A24;

  /* ---- Derived ramps ---- */
  --primary-700: color-mix(in srgb, var(--primary) 78%, black);
  --primary-600: color-mix(in srgb, var(--primary) 88%, black);
  --primary-100: color-mix(in srgb, var(--primary) 14%, white);
  --primary-50:  color-mix(in srgb, var(--primary) 7%, white);

  --accent-700:  color-mix(in srgb, var(--accent) 80%, black);
  --accent-100:  color-mix(in srgb, var(--accent) 14%, white);
  --accent-50:   color-mix(in srgb, var(--accent) 7%, white);

  --butter:      #F5C451;  /* kleine Highlights (Sterne, Marker) */

  --ink-soft:    color-mix(in srgb, var(--ink) 72%, var(--page-bg));
  --ink-muted:   color-mix(in srgb, var(--ink) 58%, var(--page-bg));
  --line:        color-mix(in srgb, var(--ink) 12%, var(--page-bg));
  --line-strong: color-mix(in srgb, var(--ink) 22%, var(--page-bg));

  --on-primary:  #FFFFFF;
  --on-footer:   color-mix(in srgb, var(--footer-bg) 12%, white);
  --on-footer-muted: color-mix(in srgb, var(--footer-bg) 40%, white);

  /* ---- Typography ---- */
  --font-display: 'Outfit', 'Avenir Next', system-ui, sans-serif;
  --font-body:    'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-menu:    var(--font-display);

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md:   1.25rem;
  --fs-lg:   clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
  --fs-xl:   clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-2xl:  clamp(2.125rem, 1.5rem + 2.4vw, 3.25rem);

  --lh-tight: 1.15;
  --lh-body:  1.65;

  /* ---- Space, radius, shadow ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
  --shadow:    0 6px 20px color-mix(in srgb, var(--ink) 9%, transparent);
  --shadow-lg: 0 18px 40px color-mix(in srgb, var(--ink) 14%, transparent);
  --focus:     0 0 0 3px color-mix(in srgb, var(--primary) 40%, transparent);

  --container: 1200px;
  --measure:   72ch;
  --gutter:    clamp(1rem, 3vw, 2rem);

  /* Sidebar grid (overridden inline from Astra's "Breite der Seitenleiste") */
  --nc-main-col: 70fr;
  --nc-side-col: 30fr;

  /* Astra global colours → theme tokens, so Astra-rendered bits match */
  --ast-global-color-0: var(--primary);
  --ast-global-color-1: var(--primary-700);
  --ast-global-color-2: var(--ink);
  --ast-global-color-3: var(--ink-soft);
  --ast-global-color-4: var(--page-bg);
  --ast-global-color-5: var(--page-bg);
}