/* tokens.css — site newTudo (foundation from newTudo-home, + NEW tokens for newTudo-pdp at the end) · PAGE-SCAFFOLD is the sole owner of this file.
   Source: brief-page.md §4 (fluid system FD-184, anchor 390, --vw-base 1920). Formulas: pipeline/components/fluid-formulas.md.
   Type tokens carry the SIZE only (--text-*), plus --lh-* and --ls-*; weight is applied by the section (400 regular / 500 medium
   share one size token: body-xl = body-xl-medium, body-lg = body-lg-medium, body = body-medium). */

/* ---- Fonts (brief-page §4.5) ---- */
/* BA-F2: Bethany Elingston — the client's licensed file (copied from output/nooa-landing/fonts/, same client). */
@font-face {
  font-family: "Bethany Elingston";
  src: url("../assets/fonts/bethany-elingston.woff2") format("woff2"),
       url("../assets/fonts/bethany-elingston.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* ⚠ TRIAL — LOCAL ONLY (user decision 2026-10-19). The client sent only Displaay's TRIAL variable font; its licence
   forbids modifying it or putting it on a publicly accessible server. It is loaded UNMODIFIED from
   assets/fonts/_trial-local-only/ for a local visual check. NEVER deploy this build while this rule exists — see
   assets/fonts/_trial-local-only/DO-NOT-DEPLOY.txt. Inter (index.html) stays as the fallback in --font-body. */
@font-face {
  font-family: "Denim INK";
  src: url("../assets/fonts/_trial-local-only/DenimINKCollectionVF-TRIAL.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
/* BA-F1: licensed Denim INK web files — when bought, drop them into assets/fonts/, DELETE the trial rule above and the
   _trial-local-only folder, and uncomment:
@font-face { font-family: "Denim INK"; src: url("../assets/fonts/denim-ink-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Denim INK"; src: url("../assets/fonts/denim-ink-medium.woff2")  format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
*/

:root {
  /* ============================================
     FLUID SCALING SYSTEM
     --vw-base = desktop frame width in Figma (WITH px)
     --max-vw  = current vw, capped at 1920 (buffer (1920-1920)*0.015 = 0)
     mobile anchor = 390 (the mobile frame width — NOT 375)
  ============================================ */
  --vw-base: 1920px;
  --max-vw: min(100vw, calc(1920px + calc((1920px - var(--vw-base)) * 0.015)));
  --mobile-anchor: 390px;

  /* Colors — brief-page §4.4 (Figma variables) */
  --color-accent:        #A31A1B;   /* Brand/Red-100 */
  --color-ink:           #171310;   /* Neutral/Black-100 */
  --color-off-white:     #F4F4F2;   /* Background/Canvas */
  --color-white:         #FFFFFF;   /* Neutral/White-100 */
  --color-success:       #1E6F52;   /* defined in Figma, NOT painted on this page (FD-DP) */
  --color-ink-80:        rgba(23, 19, 16, 0.80);
  --color-ink-40:        rgba(23, 19, 16, 0.40);
  --color-ink-20:        rgba(23, 19, 16, 0.20);
  --color-ink-10:        rgba(23, 19, 16, 0.10);
  --color-white-80:      rgba(255, 255, 255, 0.80);
  --color-white-40:      rgba(255, 255, 255, 0.40);
  --color-white-20:      rgba(255, 255, 255, 0.20);
  --color-white-10:      rgba(255, 255, 255, 0.10);
  --color-scrim-20:      rgba(0, 0, 0, 0.20);
  /* semantic aliases used by base.css */
  --color-primary:        var(--color-ink);
  --color-bg:             var(--color-white);
  --color-text:           var(--color-ink);
  --color-text-secondary: var(--color-ink-80);
  --color-border:         var(--color-ink);

  /* Typography — faces */
  --font-display: "Bethany Elingston", "Cormorant Garamond", Georgia, serif;
  --font-body:    "Denim INK", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --weight-regular: 400;
  --weight-medium:  500;

  /* Borders / effects — brief-page §4.4 */
  --radius: 0;                          /* everything is square */
  --radius-full: 9999px;                /* slider dots only */
  --stroke-1:     1px solid var(--color-ink);
  --stroke-rule:  1px solid var(--color-ink-10);
  --stroke-glass: 1px solid var(--color-white-20);
  --icon-stroke:  1.5px;
  --backdrop-blur: blur(8px);           /* Figma BACKGROUND_BLUR 16 → CSS 8 (FD-CF) — guarantee glass cards only */
  --shadow: none;

  /* Z-index */
  --z-dropdown: 10;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;

  /* ============================================
     GUTTER (brief-page §1) — consumed by base.css .container; sections may read it for
     negative-margin full-bleed children (never redefine it).
     Desktop (1024+): D-min 128 · D-base = D-max 240
  ============================================ */
  --gutter: clamp(128px, calc(240px * (var(--max-vw) / var(--vw-base))), 240px);

  /* Sticky header height per band (= css/sections/header.css .header__bar) — read by base.css `scroll-padding-top`
     so in-page anchors (#bundle, #faq, #journal) land BELOW the sticky bar (PAGE_FIX 1, FD-EA). */
  --header-h: clamp(38px, calc(72px * (var(--max-vw) / var(--vw-base))), 72px);

  /* ============================================
     FONT SCALE — Desktop (1024+)
     D-min = round(D-base × 1024 / 1920) · D-max = D-base (vw-base IS 1920)
  ============================================ */
  --text-display-hero: clamp(38px, calc(72px * (var(--max-vw) / var(--vw-base))), 72px);
  --text-display-large: clamp(30px, calc(56px * (var(--max-vw) / var(--vw-base))), 56px);
  --text-h1: clamp(30px, calc(56px * (var(--max-vw) / var(--vw-base))), 56px);
  --text-h2: clamp(26px, calc(48px * (var(--max-vw) / var(--vw-base))), 48px);
  --text-h3: clamp(21px, calc(40px * (var(--max-vw) / var(--vw-base))), 40px);
  --text-h4: clamp(17px, calc(32px * (var(--max-vw) / var(--vw-base))), 32px);
  --text-h5: clamp(15px, calc(28px * (var(--max-vw) / var(--vw-base))), 28px);
  --text-body-xl: clamp(13px, calc(24px * (var(--max-vw) / var(--vw-base))), 24px);
  --text-body-lg: clamp(11px, calc(20px * (var(--max-vw) / var(--vw-base))), 20px);
  --text-body: clamp(9px, calc(16px * (var(--max-vw) / var(--vw-base))), 16px);
  --text-body-sm: clamp(7px, calc(14px * (var(--max-vw) / var(--vw-base))), 14px);
  --text-body-sm-medium: clamp(7px, calc(14px * (var(--max-vw) / var(--vw-base))), 14px);
  --text-button: clamp(9px, calc(16px * (var(--max-vw) / var(--vw-base))), 16px);
  --text-tag-label: clamp(6px, calc(12px * (var(--max-vw) / var(--vw-base))), 12px);
  --text-tag-value: clamp(6px, calc(12px * (var(--max-vw) / var(--vw-base))), 12px);

  --lh-display-hero: 1.1;  --ls-display-hero: -0.0083em;
  --lh-display-large: 1.1;  --ls-display-large: -0.0107em;
  --lh-h1: 1.1;  --ls-h1: -0.0107em;
  --lh-h2: 1.15;  --ls-h2: -0.0125em;
  --lh-h3: 1.2;  --ls-h3: -0.01em;
  --lh-h4: 1.2;  --ls-h4: -0.0188em;
  --lh-h5: 1.25;  --ls-h5: -0.0071em;
  --lh-body-xl: 1.22;  --ls-body-xl: -0.0042em;
  --lh-body-lg: 1.26;  --ls-body-lg: 0;
  --lh-body: 1.32;  --ls-body: 0;
  --lh-body-sm: 1.36;  --ls-body-sm: 0;
  --lh-body-sm-medium: 1.36;  --ls-body-sm-medium: 0;
  --lh-button: 1.38;  --ls-button: 0.05em;
  --lh-tag-label: 1.38;  --ls-tag-label: 0.0667em;
  --lh-tag-value: 1.38;  --ls-tag-value: 0;
}

/* ============================================
   MOBILE (<=767) — base = M-base from the 390 mobile layer
   M-min = round(M-base × 320/390) · M-max = max(M-base, D-base) (FD-184) · coefficient 0.015 (fixed)
============================================ */
@media (max-width: 767px) {
  :root {
    --gutter: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 240px);
    --header-h: clamp(59px, calc(72px + (var(--max-vw) - 390px) * 0.015), 72px);
    --text-display-hero: clamp(39px, calc(48px + (var(--max-vw) - 390px) * 0.015), 72px);
    --text-display-large: clamp(33px, calc(40px + (var(--max-vw) - 390px) * 0.015), 56px);
    --text-h1: clamp(30px, calc(36px + (var(--max-vw) - 390px) * 0.015), 56px);
    --text-h2: clamp(26px, calc(32px + (var(--max-vw) - 390px) * 0.015), 48px);
    --text-h3: clamp(23px, calc(28px + (var(--max-vw) - 390px) * 0.015), 40px);
    --text-h4: clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 32px);
    --text-h5: clamp(18px, calc(22px + (var(--max-vw) - 390px) * 0.015), 28px);
    --text-body-xl: clamp(18px, calc(22px + (var(--max-vw) - 390px) * 0.015), 24px);
    --text-body-lg: clamp(15px, calc(18px + (var(--max-vw) - 390px) * 0.015), 20px);
    --text-body: clamp(12px, calc(15px + (var(--max-vw) - 390px) * 0.015), 16px);
    --text-body-sm: clamp(11px, calc(13px + (var(--max-vw) - 390px) * 0.015), 14px);
    --text-body-sm-medium: clamp(11px, calc(14px + (var(--max-vw) - 390px) * 0.015), 14px);
    --text-button: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 16px);
    --text-tag-label: clamp(9px, calc(11px + (var(--max-vw) - 390px) * 0.015), 12px);
    --text-tag-value: clamp(9px, calc(11px + (var(--max-vw) - 390px) * 0.015), 12px);

    --lh-display-hero: 1.06;  --ls-display-hero: -0.0083em;
    --lh-display-large: 1.06;  --ls-display-large: -0.01em;
    --lh-h1: 1.1;  --ls-h1: -0.0111em;
    --lh-h2: 1.15;  --ls-h2: -0.0125em;
    --lh-h3: 1.2;  --ls-h3: -0.0107em;
    --lh-h4: 1.2;  --ls-h4: -0.0167em;
    --lh-h5: 1.25;  --ls-h5: -0.0091em;
    --lh-body-xl: 1.22;  --ls-body-xl: -0.0045em;
    --lh-body-lg: 1.26;  --ls-body-lg: 0;
    --lh-body: 1.32;  --ls-body: 0;
    --lh-body-sm: 1.36;  --ls-body-sm: 0;
    --lh-body-sm-medium: 1.36;  --ls-body-sm-medium: 0;
    --lh-button: 1.38;  --ls-button: 0.05em;
    --lh-tag-label: 1.38;  --ls-tag-label: 0.0636em;
    --lh-tag-value: 1.38;  --ls-tag-value: 0;
  }
}

/* ============================================
   PSEUDO-TABLET (768–1023) — has-tablet-layer: false
   starts at M-767 (the mobile value at 767), cap M-max = max(M-base, D-base) (FD-184) · coefficient 0.025 (fixed)
============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --gutter: clamp(21.66px, calc(21.66px + (var(--max-vw) - 768px) * 0.025), 240px);
    --header-h: 72px;
    --text-display-hero: clamp(53.66px, calc(53.66px + (var(--max-vw) - 768px) * 0.025), 72px);
    --text-display-large: clamp(45.66px, calc(45.66px + (var(--max-vw) - 768px) * 0.025), 56px);
    --text-h1: clamp(41.66px, calc(41.66px + (var(--max-vw) - 768px) * 0.025), 56px);
    --text-h2: clamp(37.66px, calc(37.66px + (var(--max-vw) - 768px) * 0.025), 48px);
    --text-h3: clamp(33.66px, calc(33.66px + (var(--max-vw) - 768px) * 0.025), 40px);
    --text-h4: clamp(29.66px, calc(29.66px + (var(--max-vw) - 768px) * 0.025), 32px);
    --text-h5: clamp(27.66px, calc(27.66px + (var(--max-vw) - 768px) * 0.025), 28px);
    --text-body-xl: clamp(24px, calc(24px + (var(--max-vw) - 768px) * 0.025), 24px);
    --text-body-lg: clamp(20px, calc(20px + (var(--max-vw) - 768px) * 0.025), 20px);
    --text-body: clamp(16px, calc(16px + (var(--max-vw) - 768px) * 0.025), 16px);
    --text-body-sm: clamp(14px, calc(14px + (var(--max-vw) - 768px) * 0.025), 14px);
    --text-body-sm-medium: clamp(14px, calc(14px + (var(--max-vw) - 768px) * 0.025), 14px);
    --text-button: clamp(16px, calc(16px + (var(--max-vw) - 768px) * 0.025), 16px);
    --text-tag-label: clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 12px);
    --text-tag-value: clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 12px);

    --lh-display-hero: 1.06;  --ls-display-hero: -0.0083em;
    --lh-display-large: 1.06;  --ls-display-large: -0.01em;
    --lh-h1: 1.1;  --ls-h1: -0.0111em;
    --lh-h2: 1.15;  --ls-h2: -0.0125em;
    --lh-h3: 1.2;  --ls-h3: -0.0107em;
    --lh-h4: 1.2;  --ls-h4: -0.0167em;
    --lh-h5: 1.25;  --ls-h5: -0.0091em;
    --lh-body-xl: 1.22;  --ls-body-xl: -0.0045em;
    --lh-body-lg: 1.26;  --ls-body-lg: 0;
    --lh-body: 1.32;  --ls-body: 0;
    --lh-body-sm: 1.36;  --ls-body-sm: 0;
    --lh-body-sm-medium: 1.36;  --ls-body-sm-medium: 0;
    --lh-button: 1.38;  --ls-button: 0.05em;
    --lh-tag-label: 1.38;  --ls-tag-label: 0.0636em;
    --lh-tag-value: 1.38;  --ls-tag-value: 0;
  }
}

/* ============================================================================================================
   NEW — site newTudo (added by newTudo-pdp PAGE-SCAFFOLD, 2026-10-19; brief-page.md §1 / §4). Nothing above changed.
============================================================================================================ */
:root {
  /* colors (brief-page §4.4) */
  --color-surface:      #EAE8E6;                  /* Background/Surface — Commerce/Badge fills, avatar ring */
  --color-accent-40:    rgba(163, 26, 27, 0.40);  /* Brand/Red-Alpha-40 — timeline pills + inactive rules */
  --color-accent-10:    rgba(163, 26, 27, 0.10);  /* Brand/Red-Alpha-10 — stock progress track */
  --color-success-text: #2F9E6D;                  /* shipping banner "within 24 hours" (unstyled raw fill) */
  --color-white-70:     rgba(255, 255, 255, 0.70);/* ATC price pill text */
  --color-grey-pill-30: rgba(189, 189, 189, 0.30);/* ATC price pill background */
  /* weights (BA-F3: Supplement Facts panel) */
  --weight-semibold: 600;
  --weight-bold:     700;
  /* effects */
  --backdrop-blur-lg: blur(12px);                 /* Figma BACKGROUND_BLUR 24 → 12 (FD-CF) — origin testing cards */
  --shadow-sticky: 0 0 2px 1px rgba(0, 0, 0, 0.02), 0 1px 4px rgba(0, 0, 0, 0.06), 0 6px 24px rgba(0, 0, 0, 0.06);
  /* desktop (1024+) */
  --gutter-wide: clamp(115px, calc(216px * (var(--max-vw) / var(--vw-base))), 216px);
  --text-display-xlarge: clamp(53px, calc(100px * (var(--max-vw) / var(--vw-base))), 100px);
  --text-tag-lg:         clamp(7px,  calc(14px  * (var(--max-vw) / var(--vw-base))), 14px);
  --text-tag-badge:      clamp(7px,  calc(14px  * (var(--max-vw) / var(--vw-base))), 14px);
  --lh-display-xlarge: 1.05;  --ls-display-xlarge: -0.012em;
  --lh-tag-lg: 1.38;          --ls-tag-lg: 0.0571em;
  --lh-tag-badge: 1.38;       --ls-tag-badge: 0.0571em;
  /* shared dialog shell (js/dialog.js) — drawer width at >= 1024 (BA-PR-7) */
  --dialog-w: clamp(299px, calc(560px * (var(--max-vw) / var(--vw-base))), 560px);
}
@media (max-width: 767px) {
  :root {
    --gutter-wide: var(--gutter);
    --text-display-xlarge: clamp(53px, calc(64px + (var(--max-vw) - 390px) * 0.015), 100px);
    --text-tag-lg:         clamp(11px, calc(14px + (var(--max-vw) - 390px) * 0.015), 14px);
    --text-tag-badge:      clamp(11px, calc(13px + (var(--max-vw) - 390px) * 0.015), 14px);
    --lh-display-xlarge: 1.04;  --ls-display-xlarge: -0.0125em;
    --lh-tag-lg: 1.38;          --ls-tag-lg: 0.0571em;
    --lh-tag-badge: 1.38;       --ls-tag-badge: 0.0615em;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --gutter-wide: var(--gutter);
    --text-display-xlarge: clamp(69.66px, calc(69.66px + (var(--max-vw) - 768px) * 0.025), 100px);
    --text-tag-lg:         clamp(14px, calc(14px + (var(--max-vw) - 768px) * 0.025), 14px);
    --text-tag-badge:      clamp(14px, calc(14px + (var(--max-vw) - 768px) * 0.025), 14px);
    --lh-display-xlarge: 1.04;  --ls-display-xlarge: -0.0125em;
    --lh-tag-lg: 1.38;          --ls-tag-lg: 0.0571em;
    --lh-tag-badge: 1.38;       --ls-tag-badge: 0.0615em;
  }
}

/* ============================================================================================================
   NEW — site newTudo (added by newTudo-about PAGE-SCAFFOLD, 2026-10-19; brief-page.md §4, D-PA1). Nothing above changed.
============================================================================================================ */
:root {
  --color-ink-30: rgba(23, 19, 16, 0.30);         /* cta-banner scrim over the photo, both layers */
}

/* ============================================================================================================
   NEW — site newTudo (added by newTudo-science PAGE-SCAFFOLD, 2026-10-20; brief-page.md §4 / §8). Nothing above changed.
============================================================================================================ */
:root {
  /* type: drawer "Tiles" figures (unstyled in Figma, recurring in 7 drawers) */
  --text-display-tile: clamp(26px, calc(48px * (var(--max-vw) / var(--vw-base))), 48px);
  --lh-display-tile: 1.1;   --ls-display-tile: -0.0125em;
  /* colours (§4.4) */
  --color-ink-5:      rgba(23, 19, 16, 0.05);   /* drawer scroll-indicator track */
  --color-accent-80:  rgba(163, 26, 27, 0.80);  /* drawer bar charts P4 / P5 */
  --color-accent-20:  rgba(163, 26, 27, 0.20);  /* partial-year bar in P4 / P5 */
  --color-graphite:   #232323;                  /* raw text fill, 67 nodes */
  --color-coal:       #181817;                  /* raw text fill: lead lines + stat figures */
  --color-stone:      #6E6E6A;                  /* raw text fill: chart axis years, meta */
  /* drawer shell width (§8) — desktop (1024+) */
  --drawer-w: clamp(384px, calc(720px * (var(--max-vw) / var(--vw-base))), 720px);
}
@media (max-width: 767px) {
  :root {
    --text-display-tile: clamp(26px, calc(32px + (var(--max-vw) - 390px) * 0.015), 48px);
    --lh-display-tile: 1.06;  --ls-display-tile: -0.0125em;
    --drawer-w: 100%;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --text-display-tile: clamp(37.66px, calc(37.66px + (var(--max-vw) - 768px) * 0.025), 48px);
    --lh-display-tile: 1.06;  --ls-display-tile: -0.0125em;
    --drawer-w: 390px;
  }
}