/* Hallmark · genre: atmospheric · macrostructure: Workbench · theme: custom (brand-locked: Eatova app tokens) · enrichment: none (real screenshots) · nav: N5 Floating pill · footer: Ft5 Statement
 * knobs: N5 width=content-sized backdrop=blur anchor=top-centred · Ft5 sentence=38ch wordmark=under-sentence rule=hairline
 * pre-emit critique: P4 H4 E4 S5 R4 V4 · contrast: pass (40–41) · chrome: pass (47) · tokens: pass (48) · honest: pass (46) · nav/footer/hero: pass (42–45) · mobile: pass (34, 49, 50–57)
 * theme axes: paper-band dark · display-style grotesk-sans (Bricolage Grotesque) · accent-hue chromatic-other (lime)
 */

/* Eatova design tokens — derived from the app's AppTokens (dark + light). Every colour, font,
   space, radius, easing and duration on the page comes from here. Sections never inline values. */
:root {
  color-scheme: dark;

  /* Ground & surfaces (dark) */
  --bg: #0B100D;
  --surf: #141B17;
  --surf-2: #1F2823;
  --forest: #16371F;
  --forest-deep: #0F2617;
  --bezel: #0E1310;
  --line: rgba(239, 237, 227, 0.08);
  --line-strong: rgba(239, 237, 227, 0.16);

  /* Ink */
  --ink: #EFEDE3;
  --ink-2: #8C9B91;
  --ink-3: #5F6B65;           /* decorative strokes only — never text */

  /* Accent */
  --lime: #CDF473;
  --lime-deep: #9FCB3F;
  --on-lime: #123322;
  --on-forest: #F1F3E4;
  --on-forest-2: #98A79C;       /* secondary text on --forest: 5.2:1 */

  /* Accent alphas (the only allowed translucent lime values) */
  --lime-a05: rgba(205, 244, 115, 0.05);
  --lime-a08: rgba(205, 244, 115, 0.08);
  --lime-a10: rgba(205, 244, 115, 0.10);
  --lime-a12: rgba(205, 244, 115, 0.12);
  --lime-a18: rgba(205, 244, 115, 0.18);
  --lime-a25: rgba(205, 244, 115, 0.25);
  --lime-a40: rgba(205, 244, 115, 0.40);

  /* Ink alphas (hairlines, highlights) */
  --ink-a04: rgba(239, 237, 227, 0.04);
  --ink-a06: rgba(239, 237, 227, 0.06);
  --ink-a12: rgba(239, 237, 227, 0.12);
  --ink-a24: rgba(239, 237, 227, 0.24);

  /* Ground alphas (scrims) */
  --bg-a00: rgba(11, 16, 13, 0);
  --bg-a60: rgba(11, 16, 13, 0.60);
  --bg-a85: rgba(11, 16, 13, 0.85);
  --shade-a50: rgba(0, 0, 0, 0.50);
  --shade-a75: rgba(0, 0, 0, 0.75);

  /* Data colours (macros etc.) */
  --protein: #7C95F5;
  --carbs: #F0B458;
  --fat: #E58366;
  --snack: #6FC2A4;
  --danger: #F08A72;
  --carbs-a16: rgba(240, 180, 88, 0.16);

  /* Paper palette — used when a section opts into the light look via .paper */
  --paper: #F2EFE6;
  --paper-2: #EAE6DA;
  --paper-3: #FFFDF8;
  --paper-ink: #151E18;
  --paper-ink-2: #5A6862;
  --paper-ink-3: #8A948E;
  --paper-forest: #123322;
  --paper-lime: #C9F26E;
  --paper-line: rgba(21, 30, 24, 0.10);
  --paper-line-strong: rgba(21, 30, 24, 0.18);
  --paper-shade-a28: rgba(21, 30, 24, 0.28);
  --paper-shade-a45: rgba(21, 30, 24, 0.45);

  /* Type */
  --font-display: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif;
  --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;   /* outlier — app-data role only */

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: clamp(19px, 1.6vw, 22px);
  --h1: clamp(46px, 7.2vw, 88px);
  --h2: clamp(34px, 4.6vw, 60px);
  --h3: clamp(22px, 2.3vw, 28px);

  /* Spacing — 4-pt scale, named by role */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 144px;

  /* Layout */
  --container: 1180px;
  --container-narrow: 760px;
  --gutter: clamp(var(--space-lg), 5vw, var(--space-xl));
  --section-y: clamp(var(--space-3xl), 11vw, var(--space-4xl));
  --section-y-tight: clamp(var(--space-2xl), 7vw, var(--space-3xl));
  --section-y-loose: clamp(var(--space-3xl), 14vw, 176px);
  --nav-h: 64px;

  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;
  --rule-hair: 1px;

  /* Elevation — one whisper shadow; depth on dark is lightness, not glow */
  --shadow-card: 0 1px 2px var(--shade-a50);
  --shadow-figure: 0 1px 2px var(--shade-a50);
  --shadow-pill: 0 8px 24px -12px var(--shade-a75);

  /* Z scale */
  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-sticky-nav: 300;
  --z-modal: 400;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;
  --dur: var(--dur-long);
  --dur-fast: var(--dur-short);
}

/* Light "paper" sections remap the semantic tokens so shared components adapt. */
.paper {
  color-scheme: light;
  --bg: var(--paper);
  --surf: var(--paper-3);
  --surf-2: var(--paper-2);
  --forest: var(--paper-forest);
  --forest-deep: #0E2A1C;
  --bezel: var(--paper-2);
  --line: var(--paper-line);
  --line-strong: var(--paper-line-strong);
  --ink: var(--paper-ink);
  --ink-2: var(--paper-ink-2);
  --ink-3: var(--paper-ink-3);
  --lime: var(--paper-lime);
  --lime-deep: #A9D64A;
  --on-lime: #123322;
  --protein: #3C5CCC;
  --carbs: #C27A10;
  --fat: #CE6448;
  --snack: #3F7D68;
  --shade-a50: var(--paper-shade-a28);
  --shade-a75: var(--paper-shade-a45);
  --shadow-card: 0 1px 2px var(--paper-shade-a28);
  --shadow-figure: 0 1px 2px var(--paper-shade-a28);
  background: var(--bg);
  color: var(--ink);
}