/* ============================================================================
   ZENITH PRO · design tokens
   ----------------------------------------------------------------------------
   Everything visual is a token. Components never contain a raw colour, radius or
   shadow — they reference these — so the two themes below are the *only* place a
   theme differs, and a palette change is a change in this file alone.

   Themes
     light  «Daylight»  warm paper, white cards, deep-green brand
     dark   «Midnight»  green-black, lifted surfaces, luminous emerald brand
   The theme is selected by <html data-theme="light|dark">, set before first paint
   by src/theme-boot.js from the user's choice or the system preference.

   Contrast: every text token below is chosen to clear WCAG 2.1 AA (4.5:1) against
   the surfaces it is used on. scripts/audit_contrast.py verifies this in a real
   browser for every view, both themes, and every member colour.
   ========================================================================== */

/* ── Typeface: Inter (variable), self-hosted so every device renders identically ── */

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-greek-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  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 {
  color-scheme: light;

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --font: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI Variable', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-num: var(--font);
  --fs-xs: .75rem;      /* 12 — the smallest text the app ever sets */
  --fs-sm: .8125rem;    /* 13 */
  --fs-md: .9375rem;    /* 15 */
  --fs-base: 1rem;      /* 16 */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.375rem;    /* 22 */
  --fs-2xl: 1.75rem;    /* 28 */
  --fs-3xl: clamp(1.875rem, 1.45rem + 1.7vw, 2.625rem);   /* 30 → 42 */
  --fs-4xl: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);         /* 36 → 56 */
  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.55;

  /* ── Space (4-px ladder) ──────────────────────────────────────────────── */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;    --s-5: 1.25rem;
  --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem; --s-12: 3rem;   --s-16: 4rem;

  /* ── Shape ────────────────────────────────────────────────────────────── */
  --r-xs: 8px;  --r-sm: 12px;  --r-md: 16px;  --r-lg: 22px;  --r-xl: 28px;  --r-pill: 999px;
  --tap: 44px;                  /* comfortable touch target */
  --tap-sm: 36px;               /* the smallest interactive target the app uses */

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 120ms;  --dur-2: 220ms;  --dur-3: 420ms;  --dur-4: 700ms;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --sidebar-w: 272px;
  --rail-w: 78px;
  --content-max: 1480px;
  --tabbar-h: 68px;
  --topbar-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* ── Daylight palette ─────────────────────────────────────────────────── */
  --bg: #F4F7F5;
  --bg-2: #E9F0EC;
  --surface: rgba(255,255,255,.92);
  --surface-2: #F8FBF9;
  --surface-3: #EEF4F0;
  --surface-hover: #F1F8F4;
  --line: rgba(10, 32, 22, .085);
  --line-2: rgba(10, 32, 22, .16);

  --ink: #0D1A13;       /* headings, numerals            ≈17:1 on white */
  --ink-2: #2A3B31;     /* body                          ≈11:1 */
  --ink-3: #566A5E;     /* secondary, captions           ≈5.7:1 on white, ≥5.2 on bg */
  --ink-4: #7F9186;     /* decorative only — never text  */

  --brand: #087A57;         /* filled buttons; white text on it ≈5.4:1 */
  --brand-hi: #10A875;
  --brand-ink: #FFFFFF;
  --brand-text: #066546;    /* brand-coloured text on light surfaces ≈6.6:1 */
  --brand-soft: #DDF4E9;
  --brand-line: #A8DDC4;

  --blue: #3454D1;   --blue-text: #2B47B8;   --blue-soft: #E8EDFD;   --blue-line: #C4D0F7;
  --gold: #E29A0E;   --gold-text: #8A5500;   --gold-soft: #FDF0D5;   --gold-line: #F4D690;
  --rose: #E0455B;   --rose-text: #B42346;   --rose-soft: #FDE8EB;   --rose-line: #F6BDC6;
  --aqua: #0FA3C4;   --aqua-text: #07677F;   --aqua-soft: #DDF3F9;   --aqua-line: #A9DCE9;
  --violet: #7B55D6; --violet-text: #5B37B5; --violet-soft: #EFE9FC; --violet-line: #D3C4F3;
  --warn: #B45309;   --warn-text: #98460A;  --warn-soft: #FEF1DE;  --warn-line: #F3CE96;   /* warn-text ≈5.8:1 on its tint */
  --danger: #C62839; --danger-soft: #FDE9EC; --danger-line: #F3BAC2;
  --ok: #0B7A4B;

  /* A toast is a dark card in both themes; its action is mint with near-black text (≈12:1). */
  --action: #5FE3B2;
  --on-action: #04150C;

  /* Macronutrient colours — each one means one thing, everywhere. */
  --c-protein: var(--blue);
  --c-carbs: var(--gold);
  --c-fat: var(--rose);
  --c-water: var(--aqua);
  --c-fibre: #4DA35C;
  --c-energy: var(--brand-hi);

  /* Meal slots — the colour of the time of day. */
  --slot-breakfast: #E9950F;  --slot-breakfast-soft: #FDF1D8;  --slot-breakfast-ink: #8A5500;
  --slot-lunch: #0E9560;      --slot-lunch-soft: #E1F4EA;      --slot-lunch-ink: #08663E;
  --slot-snack: #3F73E0;      --slot-snack-soft: #E6EDFC;      --slot-snack-ink: #2B4FB5;
  --slot-dinner: #7A57D9;     --slot-dinner-soft: #EEE8FC;     --slot-dinner-ink: #5B3AB8;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(7, 24, 17, .05), 0 8px 22px -18px rgba(7, 24, 17, .20);
  --shadow-sm: 0 1px 2px rgba(7, 24, 17, .04), 0 14px 34px -24px rgba(7, 24, 17, .28);
  --shadow-md: 0 2px 4px rgba(7, 24, 17, .04), 0 24px 56px -30px rgba(7, 24, 17, .34);
  --shadow-lg: 0 38px 90px -34px rgba(7, 24, 17, .50);
  --ring-focus: 0 0 0 3px color-mix(in oklab, var(--brand) 38%, transparent);
  --glass: rgba(255, 255, 255, .72);
  --glass-strong: rgba(255, 255, 255, .88);
  --glass-soft: rgba(255, 255, 255, .48);
  --glass-bar: rgba(255, 255, 255, .90);   /* nearly opaque: navigation labels never depend on content below */
  --toast-bg: #0A1710;
  --toast-text: #FFFFFF;
  --scrim: rgba(10, 24, 16, .48);

  /* Recipe-art palette (light) */
  --art-plate: #FFFFFF;  --art-plate-2: #EEF1EA;  --art-shadow: rgba(12, 32, 20, .14);

  /* Ambient background */
  --aura-a: rgba(23, 193, 139, .18);
  --aura-b: rgba(255, 188, 112, .13);
  --aura-c: rgba(112, 132, 255, .12);

  /* The signed-in member (set at runtime from the profile colour) */
  --member: #0E9F6E;
  --member-deep: color-mix(in oklab, var(--member) 68%, #000);
  --member-soft: color-mix(in oklab, var(--member) 14%, transparent);
  --member-line: color-mix(in oklab, var(--member) 34%, transparent);
}

[data-theme='dark'] {
  color-scheme: dark;

  /* ── Midnight palette ─────────────────────────────────────────────────── */
  --bg: #060908;
  --bg-2: #0A100D;
  --surface: rgba(15, 23, 19, .92);
  --surface-2: #121C17;
  --surface-3: #19241F;
  --surface-hover: #16241D;
  --line: rgba(255, 255, 255, .075);
  --line-2: rgba(255, 255, 255, .155);

  --ink: #F2F7F4;
  --ink-2: #CCD9D1;
  --ink-3: #9DB0A5;
  --ink-4: #667a6f;

  --brand: #45DBA6;
  --brand-hi: #6BE9BD;
  --brand-ink: #04150C;
  --brand-text: #78F0C5;
  --brand-soft: rgba(69, 219, 166, .13);
  --brand-line: rgba(69, 219, 166, .34);

  --blue: #7F9BFF;   --blue-text: #A5B9FF;   --blue-soft: rgba(127, 155, 255, .13);   --blue-line: rgba(127, 155, 255, .34);
  --gold: #F5B84A;   --gold-text: #F8C868;   --gold-soft: rgba(245, 184, 74, .13);    --gold-line: rgba(245, 184, 74, .34);
  --rose: #FF7A8E;   --rose-text: #FFA0AE;   --rose-soft: rgba(255, 122, 142, .13);   --rose-line: rgba(255, 122, 142, .34);
  --aqua: #4CCBE6;   --aqua-text: #7FDCF0;   --aqua-soft: rgba(76, 203, 230, .13);    --aqua-line: rgba(76, 203, 230, .34);
  --violet: #A48BFF; --violet-text: #C0AEFF; --violet-soft: rgba(164, 139, 255, .14); --violet-line: rgba(164, 139, 255, .34);
  --warn: #F5B84A;   --warn-text: #F8C868;  --warn-soft: rgba(245, 184, 74, .13);  --warn-line: rgba(245, 184, 74, .34);
  --danger: #FF7A8E; --danger-soft: rgba(255, 122, 142, .13); --danger-line: rgba(255, 122, 142, .34);
  --ok: #34D399;

  --c-fibre: #6FD07E;

  --slot-breakfast: #F5B84A;  --slot-breakfast-soft: rgba(245, 184, 74, .13);  --slot-breakfast-ink: #F8C868;
  --slot-lunch: #34D399;      --slot-lunch-soft: rgba(52, 211, 153, .13);      --slot-lunch-ink: #63E6B5;
  --slot-snack: #7F9BFF;      --slot-snack-soft: rgba(127, 155, 255, .14);     --slot-snack-ink: #A5B9FF;
  --slot-dinner: #A48BFF;     --slot-dinner-soft: rgba(164, 139, 255, .14);    --slot-dinner-ink: #C0AEFF;

  --shadow-xs: 0 0 0 1px var(--line);
  --shadow-sm: 0 0 0 1px var(--line), 0 10px 24px -14px rgba(0, 0, 0, .6);
  --shadow-md: 0 0 0 1px var(--line), 0 22px 44px -20px rgba(0, 0, 0, .7);
  --shadow-lg: 0 0 0 1px var(--line-2), 0 34px 80px -30px rgba(0, 0, 0, .85);
  --ring-focus: 0 0 0 3px color-mix(in oklab, var(--brand) 45%, transparent);
  --glass: rgba(15, 23, 18, .78);
  --glass-strong: rgba(15, 23, 18, .94);
  --glass-soft: rgba(22, 34, 27, .58);
  --glass-bar: rgba(11, 18, 14, .95);
  --toast-bg: #050A07;
  --toast-text: #F7FBF8;
  --scrim: rgba(0, 0, 0, .64);

  --art-plate: #EFF4F0;  --art-plate-2: #D9E3DC;  --art-shadow: rgba(0, 0, 0, .45);

  --aura-a: rgba(69, 219, 166, .16);
  --aura-b: rgba(255, 185, 96, .08);
  --aura-c: rgba(122, 142, 255, .13);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; }
}