/* OD Nutra design system: tokens
   Source of truth for every OD Nutra page. Docs: design/DESIGN_SYSTEM.md.
   Three layers: primitives (raw ramps, never used by components),
   semantic (what components read, remapped per surface), component knobs.
   Ramps come from tools/ramps.py (OKLCH, anchored on the approved hero v5). */

/* ---------- 1. Primitives ---------- */
:root {
  /* Teal: the brand blue from the OD Nutra logo (Lino 2026-10-29). 700 = #336469, the brand fill for
     buttons and coloured sections; 500 = #46878D, the strong words of titles on white; 950 the dark sections. */
  --teal-50: #ecfafb;
  --teal-100: #dff1f3;
  --teal-200: #c4dfe2;
  --teal-300: #a2c7cb;
  --teal-400: #7dadb2;
  --teal-500: #46878D;
  --teal-600: #35777e;
  --teal-700: #336469;
  --teal-800: #194449;
  --teal-900: #0d2c2f;
  --teal-950: #051719;

  /* Neutral, tinted toward teal. 50 is the menu hover, 600 the muted text, 950 the menu ink. */
  --neutral-50: #f1f4f4;
  --neutral-100: #e9eeee;
  --neutral-200: #d4dadb;
  --neutral-300: #bac1c2;
  --neutral-400: #9da5a6;
  --neutral-500: #7f8889;
  --neutral-600: #646e6f;
  --neutral-700: #4e5657;
  --neutral-800: #383f3f;
  --neutral-900: #222828;
  --neutral-950: #111515;

  /* Aqua: the light signal from the logo. 400 = #5DB2C3, the strong words of titles on dark sections
     and the accents; 200 the orbit beam and accents on #336469. Decoration and accents only on white. */
  --aqua-50: #e8fbff;
  --aqua-100: #cff5fd;
  --aqua-200: #a4e6f4;
  --aqua-300: #7fcede;
  --aqua-400: #5DB2C3;
  --aqua-500: #3f94a4;
  --aqua-600: #327784;
  --aqua-700: #275c67;
  --aqua-800: #1f434a;
  --aqua-900: #172a2e;
  --aqua-950: #05171a;

  --white: #ffffff;
  /* Channel triplets for translucent mixes: rgb(var(--rgb-ink) / 0.4) */
  --rgb-white: 255 255 255;
  --rgb-ink: 5 23 25;        /* teal-950 */
  --rgb-shade: 8 28 31;     /* text shadows over film */
  --rgb-lift: 14 32 36;      /* popover shadows on light surfaces */
  --rgb-brand: 51 100 105;   /* teal-700 */
  --rgb-beam: 164 230 244;   /* aqua-200 */
  --rgb-glow: 127 206 222;   /* aqua-300 */

  /* ---------- Type ---------- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Hero title matches section titles in size (Lino 2026-10-24); weight split keeps the hierarchy */
  --display-size: var(--h2-size);                             /* 30 to 42px; phones 22 to 30px */
  --display-leading: 0.98;
  --display-track: -0.04em;
  --display-weight: 400;

  --h2-size: clamp(1.875rem, 1.1rem + 1.7vw, 2.625rem);       /* 30 to 42px */
  --h2-leading: 1.02;
  --h2-track: -0.035em;
  --h2-weight: 400;

  --h3-size: clamp(1.375rem, 1.2rem + 0.45vw, 1.625rem);       /* 22 to 26px */
  --h3-leading: 1.2;
  --h3-track: -0.025em;
  --h3-weight: 500;

  --lede-size: 1.1875rem;   /* 19px; 16px under 760px */
  --lede-leading: 1.5;
  --lede-track: -0.015em;

  --body-size: 1.0625rem;   /* 17px; 16px under 760px */
  --body-leading: 1.6;
  --body-track: -0.01em;

  --control-leading: normal; /* single-line text inside fixed-height controls */
  --ui-size: 0.9375rem;     /* 15px: nav, menus, small pills */
  --ui-track: -0.015em;
  --btn-size: 1.0625rem;    /* 17px; 16px under 760px */
  --btn-track: -0.02em;
  --small-size: 0.8125rem;  /* 13px: helper lines, captions */
  --small-track: -0.005em;
  --label-size: 0.8125rem;  /* 13px, weight 500, sentence case */
  --label-track: 0.01em;
  --badge-size: 0.875rem;   /* 14px, weight 500: the pill badge */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;   /* also the strong words inside a regular title */

  /* ---------- Space and layout ---------- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-52: 52px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;

  --gutter: clamp(52px, 5vw, 96px);   /* v68: wider margins on big screens so the page breathes */
  --content-max: 1320px;
  --measure: 30em;          /* longest comfortable text line */
  --section-y: clamp(96px, 4rem + 7vw, 184px);  /* v68 (Lino): more air between sections */
  --nav-h: 76px;
  --btn-h: 54px;
  --control-h: 44px;        /* nav pill, menu button, inputs */

  /* ---------- Shape ---------- */
  --radius-focus: 6px;
  --radius-item: 10px;      /* rows inside menus */
  --radius-card: 16px;      /* menus, popovers, cards */
  --radius-panel: 24px;     /* large media frames */
  --radius-pill: 999px;     /* every button and chip */

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 200ms;        /* color, small arrows */
  --dur-base: 250ms;        /* shadows, backgrounds */
  --dur-slow: 350ms;        /* the magnet lean */
  --ease-entrance: cubic-bezier(.16, 1, .3, 1);   /* long, soft landing */
  --dur-reveal: 1200ms;     /* entrance rise */
  --dur-word: 900ms;        /* title words: pop up and grow into place */
  --dur-card: 1000ms;       /* cards: rise, untilt and grow into place */
  --dur-settle: 1800ms;     /* photos and the hero film settling from a slight zoom */
  --dur-draw: 1400ms;       /* line icons drawing themselves */
  /* Spring entrances (Lino 2026-10-29, after Stooku): a small overshoot, then settle */
  --ease-spring: cubic-bezier(.34, 1.42, .64, 1);  /* title words and cards, ~ back.out(1.4) */
  --ease-pop: cubic-bezier(.34, 1.9, .64, 1);      /* badges twisting in, ~ back.out(2) */
  --dur-spring: 900ms;      /* title words and badges */
  --ease-exit: cubic-bezier(.4, 0, .7, .2);       /* regression: eases off, then leaves */
  --dur-exit: 700ms;        /* regression: a group sinking back out when scrolled back up past */
  --ease-expo: cubic-bezier(.19, 1, .22, 1);       /* hero: masked title lines and the film opening */
  --dur-mask: 1100ms;       /* hero title words sliding up out of their line */
  --mask-stagger: 90ms;
  --dur-open: 2200ms;       /* hero film opening from a framed inset to full bleed */
  --stagger: 90ms;
  --word-stagger: 50ms;
  --group-stagger: 150ms;   /* between sibling groups and cards (--i) */
  --rise: 24px;             /* entrance travel for text */
  --rise-card: 56px;        /* entrance travel for cards */
  --beam-period: 3.6s;      /* one orbit lap */
  --beam-delay: 1500ms;     /* first lap waits for the hero entrance */
}

@media (max-width: 760px) {
  :root {
    --gutter: 24px;
    --nav-h: 64px;
    --btn-h: 52px;
    --lede-size: 1rem;
    --body-size: 1rem;
    --btn-size: 1rem;
    /* Phones: h2 scales with the column so a 12em first line still fits (22 to 30px) */
    --h2-size: clamp(1.375rem, calc((100vw - 2 * var(--gutter)) / 12), 1.875rem);
  }
}

/* ---------- 2. Semantic tokens, per surface ----------
   Put data-surface on a section to switch every component inside it.
   paper  (default) white page sections, menus, panels
   mist   quiet alternate section on neutral-50
   forest solid deep-teal sections without media (titles: aqua-400 #5DB2C3)
   brand  solid #336469 sections (Lino 2026-10-29: Quality & testing); white cards sit on it
   film   anything laid over photography or video (needs a scrim) */
:root, [data-surface="paper"] {
  --surface-1: var(--white);
  --surface-2: var(--neutral-50);       /* hover rows, quiet fills */
  --surface-3: var(--neutral-100);      /* fills only: text-2 fails here */
  --text-1: var(--neutral-950);         /* 18.6:1 on white */
  --text-2: var(--neutral-600);         /* 5.27:1 on white, 4.75:1 on surface-2 */
  --text-disabled: var(--neutral-400);
  --text-accent: var(--teal-700);       /* #336469, 6.63:1 on white */
  --title-strong: var(--teal-500);      /* #46878D (Lino 2026-10-29), strong lead words of a title: 4.11:1 on white, 3.72:1 on mist; titles are 30px+ so the large-text 3:1 applies */
  --border: rgb(22 25 23 / 0.08);       /* dividers */
  --border-control: var(--neutral-500); /* 3.63:1, control outlines */
  --focus-ring: var(--teal-700);
  --signal: var(--aqua-400);            /* #5DB2C3: dots and beams, never text */

  --primary-bg: var(--teal-700);        /* #336469, the brand fill */
  --primary-fg: var(--white);           /* 6.63:1 */
  --primary-halo: 0 0 0 4px rgb(var(--rgb-brand) / 0.10), 0 10px 26px -12px rgb(var(--rgb-brand) / 0.55);
  --primary-halo-hover: 0 0 0 5px rgb(var(--rgb-brand) / 0.14), 0 14px 32px -12px rgb(var(--rgb-brand) / 0.6);
  --primary-inset: inset 0 -3px 8px rgb(0 0 0 / 0.16);
  --beam-tail: rgb(var(--rgb-glow) / 0.55);
  --beam-head: var(--aqua-400);
  --spotlight: rgb(var(--rgb-beam) / 0.30);
  --solid-shadow: 0 10px 26px -14px rgb(var(--rgb-brand) / 0.6);

  --secondary-bg: transparent;
  --secondary-bg-hover: var(--surface-2);
  --secondary-fg: var(--text-1);
  --secondary-rim: var(--border-control);
  --secondary-inset: none;
  --secondary-blur: none;
  --secondary-shadow: none;
  --secondary-text-shadow: none;

  --popover-shadow: 0 18px 40px -12px rgb(var(--rgb-lift) / 0.22);
  --card-bg: var(--white);
  --card-rim: rgb(22 25 23 / 0.11);     /* a touch firmer than --border */
  --card-rim-width: 1.5px;              /* 3 device px on retina; Chrome draws 1px at 1x */
  --card-shadow: 0 1px 3px rgb(var(--rgb-lift) / 0.06), 0 16px 40px -20px rgb(var(--rgb-lift) / 0.22);
  --card-shadow-hover: 0 2px 4px rgb(var(--rgb-lift) / 0.07), 0 26px 56px -22px rgb(var(--rgb-lift) / 0.30);

  --badge-bg: var(--white);
  --badge-bg-hover: var(--surface-2);
  --badge-fg: var(--text-1);
  --badge-icon: var(--text-accent);
  --badge-rim: rgb(22 25 23 / 0.10);
  --badge-shadow: 0 1px 2px rgb(var(--rgb-lift) / 0.06), 0 6px 16px -10px rgb(var(--rgb-lift) / 0.18);
  --badge-blur: none;
  --badge-text-shadow: none;

  /* Batch file and Certificate of Analysis (.quality): the checkpoint track, the
     covered values and the released certificate. Fills and marks only, never text */
  /* Rail (horizontal card carousel) and the ingredient card's name tile */
  --rail-track: var(--neutral-200);
  --rail-thumb: var(--teal-700);
  --tile-bg: var(--neutral-50);
  --file-track: var(--neutral-200);
  --file-fill: linear-gradient(90deg, var(--aqua-400), var(--aqua-300));
  --file-fill-y: linear-gradient(180deg, var(--aqua-400), var(--aqua-300));
  --file-glow: 0 0 12px rgb(var(--rgb-glow) / 0.45);
  --file-mark: var(--aqua-200);         /* done dots and checks */
  --file-mark-fg: var(--teal-950);    /* the tick on a done mark */
  --file-dot-rim: var(--neutral-300);
  --file-bar: var(--neutral-200);       /* a covered value */
  --file-now-bg: rgb(var(--rgb-beam) / 0.12);
  --file-now-rim: rgb(var(--rgb-glow) / 0.55);
  --file-pool: radial-gradient(closest-side, rgb(var(--rgb-beam) / 0.34), rgb(var(--rgb-beam) / 0.10) 55%, transparent);
  --doc-bg: var(--white);
  --doc-rim: rgb(22 25 23 / 0.08);
  --doc-rule: rgb(22 25 23 / 0.10);
  --doc-stamp: var(--teal-700);
  --doc-ghost: var(--neutral-50);
  --doc-shadow: 0 1px 2px rgb(var(--rgb-lift) / 0.08), 0 22px 44px -20px rgb(var(--rgb-lift) / 0.30), 0 60px 110px -50px rgb(var(--rgb-brand) / 0.45);
  /* Element table (.el-table): tiles, the chosen tile's rim and glow, and the
     group marks. Group marks are fills only (dots and bars), never text */
  --shelf-card-bg: var(--white);
  --shelf-card-bg-hover: var(--teal-50);
  --shelf-card-rim: rgb(var(--rgb-brand) / 0.10);
  --shelf-card-shadow: 0 1px 2px rgb(var(--rgb-brand) / 0.06), 0 18px 36px -26px rgb(var(--rgb-brand) / 0.5);
  --shelf-card-hover: inset 0 0 0 2px var(--aqua-300), 0 0 0 4px rgb(var(--rgb-glow) / 0.18), 0 22px 40px -22px rgb(var(--rgb-brand) / 0.6);
  --shelf-ink: var(--neutral-950);
  --shelf-cap-bg: var(--teal-800);
  --shelf-cap-ink: var(--white);
  --shelf-cap-sub: var(--teal-200);
  --shelf-stat: var(--teal-600);
  color-scheme: light;
}

[data-surface="mist"] {
  --surface-1: var(--neutral-50);
  --surface-2: var(--white);
  --secondary-bg-hover: var(--white);
}

[data-surface="forest"] {
  --surface-1: var(--teal-950);
  --surface-2: var(--teal-900);
  --surface-3: var(--teal-800);
  --text-1: var(--neutral-50);          /* 17.4:1 on teal-950 */
  --text-2: var(--teal-300);           /* 10.1:1 on 950 */
  --text-disabled: var(--teal-600);
  --text-accent: var(--aqua-200);       /* 13.3:1 on teal-950 */
  --border: rgb(var(--rgb-white) / 0.10);
  --border-control: var(--teal-500);  /* 5.23:1 */
  --focus-ring: var(--white);
  --signal: var(--aqua-200);
  --card-bg: var(--surface-2);
  --card-rim: var(--border);
  --card-rim-width: 1px;
  --card-shadow: none;
  --card-shadow-hover: none;
  --rail-track: rgb(var(--rgb-white) / 0.16);
  --rail-thumb: var(--aqua-200);
  --tile-bg: var(--teal-950);
  /* Full-screen scroll scene (.scene): a soft pool of light behind the particles,
     and the scrims that keep the corner copy legible over them */
  --scene-bg: radial-gradient(60% 70% at var(--scene-focus-x, 50%) var(--scene-focus-y, 50%), var(--teal-900) 0%, var(--teal-950) 70%);
  --scene-scrim-corner: linear-gradient(to top, rgb(var(--rgb-ink) / 0.8) 0, rgb(var(--rgb-ink) / 0.46) 18%, transparent 40%);
  --scene-scrim-bottom: linear-gradient(to top, rgb(var(--rgb-ink) / 0.9) 0, rgb(var(--rgb-ink) / 0.66) 30%, transparent 50%);
  --scene-track: rgb(var(--rgb-white) / 0.16);
  --shelf-card-bg: #f4f3ee;              /* cream label paper */
  --shelf-card-bg-hover: #f4f3ee;
  --shelf-card-rim: rgb(16 45 36 / 0.10);
  --shelf-card-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.6);
  --shelf-card-hover: inset 0 0 0 2px var(--aqua-200), 0 0 34px -6px rgb(var(--rgb-glow) / 0.45);
  --shelf-ink: #1b2420;
  --shelf-cap-bg: var(--teal-900);
  --shelf-cap-ink: var(--neutral-50);
  --shelf-cap-sub: var(--teal-300);
  --shelf-stat: var(--aqua-200);
  color-scheme: dark;
}

/* Over media and on forest the primary turns into the luminous white pill */
[data-surface="film"], [data-surface="forest"], [data-surface="brand"] {
  --title-strong: currentColor;         /* titles stay one colour over media; forest and brand override below */
  --primary-bg: var(--white);
  --primary-fg: var(--teal-700);        /* 6.63:1 */
  --primary-halo: 0 0 0 4px rgb(var(--rgb-white) / 0.16), 0 0 28px 2px rgb(var(--rgb-white) / 0.32);
  --primary-halo-hover: 0 0 0 5px rgb(var(--rgb-white) / 0.22), 0 0 36px 4px rgb(var(--rgb-white) / 0.4);
  --primary-inset: inset 0 -3px 8px rgb(var(--rgb-brand) / 0.10);
  --beam-tail: rgb(var(--rgb-beam) / 0.45);
  --beam-head: var(--white);
  --spotlight: rgb(var(--rgb-glow) / 0.32);

  --secondary-bg: rgb(var(--rgb-white) / 0.14);
  --secondary-bg-hover: rgb(var(--rgb-white) / 0.22);
  --secondary-fg: var(--white);
  --secondary-rim: rgb(var(--rgb-white) / 0.5);
  --secondary-inset: inset 0 1px 0 rgb(var(--rgb-white) / 0.35);
  --secondary-blur: blur(14px);
  --secondary-shadow: 0 6px 20px -10px rgb(var(--rgb-shade) / 0.4);
  --secondary-text-shadow: 0 1px 8px rgb(var(--rgb-shade) / 0.35);

  --badge-bg: rgb(var(--rgb-white) / 0.12);
  --badge-bg-hover: rgb(var(--rgb-white) / 0.2);
  --badge-fg: var(--white);
  --badge-icon: var(--aqua-200);
  --badge-rim: rgb(var(--rgb-white) / 0.3);
  --badge-shadow: inset 0 1px 0 rgb(var(--rgb-white) / 0.25), 0 6px 20px -10px rgb(var(--rgb-shade) / 0.4);
  --badge-blur: blur(14px);
  --badge-text-shadow: 0 1px 8px rgb(var(--rgb-shade) / 0.35);
}

/* Brand: the solid deep-teal section (Quality & testing). Lino 2026-10-29 first set it
   to #336469, then (v71) asked for the same dark ground as the quote section, so it is
   teal-900 with the shared grain (--bg-grain in components.css). White copy, aqua
   (#5DB2C3) strong words; the white cards inside reset to paper. */
[data-surface="brand"] {
  --surface-1: var(--teal-900);
  --surface-2: var(--teal-800);
  --surface-3: var(--teal-800);
  --text-1: var(--white);               /* 14.81:1 on #0d2c2f */
  --text-2: var(--teal-100);            /* 12.70:1 */
  --text-accent: var(--aqua-200);       /* 10.72:1 */
  --border: rgb(var(--rgb-white) / 0.16);
  --border-control: var(--teal-300);
  --focus-ring: var(--white);
  --signal: var(--aqua-300);
  --primary-fg: var(--teal-800);        /* 10.7:1 on the white pill */
  color-scheme: dark;
}
/* The strong words of a title after the shared film/forest/brand block above:
   aqua on the dark surfaces (Lino 2026-10-29), still one colour over film */
[data-surface="forest"] { --title-strong: var(--aqua-400); }   /* #5DB2C3, 7.54:1 on teal-950 */
[data-surface="brand"] { --title-strong: var(--aqua-400); }    /* #5DB2C3, 6.08:1 on teal-900 (v71) */

[data-surface="film"] {
  --surface-1: var(--teal-950);       /* only shows before the media paints */
  --text-1: var(--white);
  --text-2: rgb(var(--rgb-white) / 0.86);   /* ledes over the scrim */
  --text-3: rgb(var(--rgb-white) / 0.8);    /* nav links at rest */
  --text-accent: var(--white);
  --border: rgb(var(--rgb-white) / 0.35);
  --border-control: rgb(var(--rgb-white) / 0.45);
  --focus-ring: var(--white);
  --signal: var(--aqua-200);
  --scrim-top: linear-gradient(to bottom, rgb(var(--rgb-ink) / 0.74) 0, rgb(var(--rgb-ink) / 0.44) calc(var(--nav-h) + 40px), transparent calc(var(--nav-h) + 170px));
  --text-shadow-film: 0 1px 14px rgb(var(--rgb-shade) / 0.45), 0 0 2px rgb(var(--rgb-shade) / 0.25);
  --scrim-bottom: linear-gradient(to top, rgb(var(--rgb-ink) / 0.86) 0, rgb(var(--rgb-ink) / 0.62) 28%, rgb(var(--rgb-ink) / 0.18) 50%, transparent 64%);
  --scrim-bottom-tall: linear-gradient(to top, rgb(var(--rgb-ink) / 0.9) 0, rgb(var(--rgb-ink) / 0.78) 34%, rgb(var(--rgb-ink) / 0.4) 52%, transparent 70%);
  --callout-text-shadow: 0 0 2px rgb(var(--rgb-shade) / 0.9), 0 1px 3px rgb(var(--rgb-shade) / 0.7), 0 0 14px rgb(var(--rgb-shade) / 0.55);
  /* Frosted panel over a photo: a dark tint under the blur keeps white text legible on light images */
  --panel-bg: rgb(var(--rgb-ink) / 0.44);
  --panel-rim: rgb(var(--rgb-white) / 0.26);
  --panel-inset: inset 0 1px 0 rgb(var(--rgb-white) / 0.22);
  --panel-shadow: 0 18px 40px -18px rgb(var(--rgb-shade) / 0.55);
  --panel-blur: blur(20px) saturate(140%);
  --solid-shadow: 0 10px 28px -12px rgb(var(--rgb-shade) / 0.6);
  color-scheme: dark;
}

/* Laptops (short desktop viewports, up to 900px tall): the section gap and the
   tall photo cards follow the viewport height, so a card never runs past one
   screen. --fit-card-h is the tallest a card may get: the viewport minus the
   nav and room for the section head's last line. Taller screens keep the base. */
@media (min-width: 1001px) and (max-height: 900px) {
  :root {
    --section-y: clamp(80px, 4rem + 7vw, min(176px, 15svh));
    --fit-card-h: max(420px, calc(100svh - var(--nav-h) - 150px));
  }
}