/* =========================================================== */
/* The Tooth Place - design tokens (plan Sections 13 + 14)      */
/* Load AFTER ag-defensive.css and ag-motion.css (this file      */
/* re-states the motion durations the plan asks for), BEFORE    */
/* every other component file.                                   */
/*                                                               */
/* Numeric system: every design-controlled number is a multiple  */
/* of 3 or 7 (plan Section 13). Documented exceptions:           */
/*   - 16px body size (reads best; 15/18 would be on-system)     */
/*   - 1px hairlines (rendering minimum)                         */
/*   - functional values: 100%, 0, aspect ratios, the GHL        */
/*     iframe's 720px reserve, the logo's geometry               */
/*   - easing curves (carried from the AG motion standard)       */
/* Owner decisions 2026-09-24: League Spartan (primary) +        */
/* Literata (body, owner 2026-09-26; was DM Sans). No DM Serif Display. League Spartan has no    */
/* italic: emphasis = weight + sage-deep, never faux italic.     */
/* =========================================================== */

/* ---------- Fonts (self-hosted, OFL; licences beside the files) ---------- */
@font-face {
  font-family: 'League Spartan';
  src: url('/assets/fonts/league-spartan-variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('/assets/fonts/literata-variable.woff2') format('woff2');
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('/assets/fonts/literata-italic-variable.woff2') format('woff2');
  font-weight: 200 900; font-style: italic; font-display: swap;
}

:root {
  /* ---------- Palette (owner-locked) ---------- */
  --sage: #9CAF88;  --sage-deep: #6F8A60;  --sage-soft: #C2D1B5;
  --cream: #F7F1E5; --cream-warm: #FAF6EC; --cream-soft: #FBF7EC; --cream-deep: #EDE4D0;
  --charcoal: #2A2A2A; --charcoal-soft: #3F3F3F; --ink: #1A1A1A;
  --gold: #C9A861;  --paper: #FFFFFF;

  /* ---------- Matte surfaces ---------- */
  --surface-page: var(--cream);
  --surface-alt: var(--cream-deep);
  --surface-warm: var(--cream-warm);
  --surface-card: var(--paper);
  --surface-tint: rgba(156, 175, 136, 0.09);   /* icon containers, selected row */
  --surface-ink: var(--ink);                    /* footer, drawer */
  --surface-dark: var(--charcoal);              /* dark bands: trust, reviews (owner: allowed, matte) */
  --line: rgba(42, 42, 42, 0.09);
  --line-strong: rgba(42, 42, 42, 0.21);
  --line-on-ink: rgba(247, 241, 229, 0.09);
  --line-on-ink-strong: rgba(247, 241, 229, 0.21);
  --text: var(--charcoal); --text-strong: var(--ink); --text-soft: var(--charcoal-soft);
  --text-on-ink: var(--cream); --text-on-ink-soft: rgba(247, 241, 229, 0.7);
  --accent: var(--gold);                        /* AG contract: focus, cursor edge, scrollbar */
  --shadow-1: 0 7px 21px rgba(42, 42, 42, 0.07);

  /* Contrast notes (computed, WCAG 2.x):
     sage-deep on cream 3.4:1, on cream-deep 3.0:1, on paper 3.8:1 -> LARGE TEXT ONLY
     (>= 24px regular or >= 18.66px bold). Small text uses charcoal/charcoal-soft.
     gold on cream 2.0:1 -> rules, rings and icons only, never text on light.
     gold on ink/charcoal 7.7/6.3:1, sage on ink 7.4:1 -> fine for text on dark. */

  /* ---------- Type ---------- */
  --font-display: 'League Spartan', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Literata', Georgia, 'Times New Roman', serif;
  --font-heading: var(--font-display);          /* AG button + header brand read this */

  /* fluid sizes, linear between 350px and 1400px viewports; rem so the text-size panel scales them */
  --fs-12: 0.75rem;                                             /* eyebrow */
  --fs-14: 0.875rem;                                            /* small, meta, pills */
  --fs-16: 1rem;                                                /* body (documented exception) */
  --fs-lead: clamp(1.125rem, 1.0625rem + 0.286vw, 1.3125rem);    /* 18 -> 21 */
  --fs-h3: clamp(1.3125rem, 1.1875rem + 0.571vw, 1.6875rem);     /* 21 -> 27 */
  --fs-h2: clamp(1.875rem, 1.625rem + 1.143vw, 2.625rem);        /* 30 -> 42 */
  --fs-h1: clamp(1.875rem, 1.479rem + 1.81vw, 3.0625rem);        /* 30 -> 49 */
  --fs-num: clamp(2.625rem, 2.1875rem + 2vw, 3.9375rem);         /* 42 -> 63 */
  --fs-score: clamp(5.25rem, 4.375rem + 4vw, 7.875rem);          /* 84 -> 126 */
  --lh-tight: 1.05; --lh-head: 1.2; --lh-ui: 1.5; --lh-body: 1.8;
  --tr-head: -0.021em; --tr-sub: -0.012em; --tr-ui: 0.03em; --tr-eyebrow: 0.21em;

  /* AG typography contract hook: hero ceiling = our h1 */
  --text-hero: var(--fs-h1);
  --text-h2: var(--fs-h2);
  --text-sm: var(--fs-14);
  --text-base: var(--fs-16);
  --text-eyebrow: var(--fs-12);

  /* ---------- Spacing (curated 3/7 scale) ---------- */
  --s-3: 3px; --s-6: 6px; --s-7: 7px; --s-9: 9px; --s-12: 12px; --s-14: 14px; --s-21: 21px;
  --s-28: 28px; --s-42: 42px; --s-63: 63px; --s-84: 84px; --s-126: 126px;
  --gutter: 21px;               /* 350-767 */
  --section-y: 63px;            /* mobile */
  --max-w: 1260px;              /* 7 x 180 */
  --prose-w: 630px;             /* 63 x 10 */

  /* ---------- Radii ---------- */
  --r-7: 7px; --r-14: 14px; --r-21: 21px; --r-28: 28px;

  /* ---------- Motion (plan 5.4) ---------- */
  --duration-instant: 120ms;
  --duration-quick: 210ms;
  --duration-accordion: 300ms;
  --duration-lift: 420ms;
  --duration-medium: 630ms;
  --duration-long: 900ms;
  --ease-satisfying: cubic-bezier(.16, 1, .3, 1);
  --ease-settle: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --ease-snap: cubic-bezier(.22, 1, .36, 1);     /* no overshoot: matte objects do not bounce */
  --dist-micro: 7px; --dist-base: 14px; --dist-lg: 21px;
  --stagger: 70ms;

  /* ---------- Chrome ---------- */
  --header-h: 77px;             /* 7 x 11 */
  --touch: 49px;                /* 7 x 7 */
  --sticky-h: 0px;              /* mobile sticky bar removed 2026-10-01 (owner); was 70px. Footer and scroll padding read this */
  --z-veil: 90; --z-header: 100; --z-sticky: 95; --z-a11y: 96;

  /* ---------- AG contract bridges (names the AG components read) ---------- */
  --brand-primary: var(--charcoal); --brand: var(--charcoal); --brand-700: var(--ink);
  --brand-rgb: 156 175 136;
  --c-white: var(--cream); --on-ink: var(--cream); --on-ink-soft: var(--text-on-ink-soft);
  --text-primary: var(--ink); --text-secondary: var(--charcoal-soft);
  --header-bg: var(--cream); --header-border: var(--line);
  --section-padding-inline: var(--gutter);
  --radius-md: var(--r-14);
  --space-md: var(--s-21); --space-lg: var(--s-28);
  --fw-hero: 700; --fw-h2: 600; --fw-h3: 600;
  --logo-size: 21px;
  --glass-08: var(--line-on-ink); --glass-12: var(--line-on-ink);
  --drawer-backdrop: rgba(26, 26, 26, 0.42); --drawer-close-border: var(--line-on-ink-strong);
  --scrim-45: transparent; --sh-sm: none;
  --c-mint: var(--sage); --mint-glow: transparent;
  --bg-footer: var(--ink); --text-on-footer: var(--cream); --text-muted-on-footer: var(--text-on-ink-soft);
  --neutral-400: var(--text-on-ink-soft);
}

@media (min-width: 768px) {
  :root { --gutter: 42px; --section-y: 84px; }
}
@media (min-width: 1200px) {
  :root { --gutter: 63px; --section-y: 126px; }
}