/* =====================================================================
   TheDentist.ai — Design Tokens
   Editorial, calm, positive-only.
   "Outcomes, not opinions."
   ===================================================================== */

/* ---------- Webfonts (Google Fonts) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* =================================================================
     COLOR — primary palette
     ================================================================= */
  --ink:    #0A1F33;  /* deep blue-graphite — primary text, masthead */
  --paper:  #FAF8F4;  /* warm white — main background */
  --bone:   #F2EEE6;  /* off-white card — secondary surface */
  --seal:   #B8492C;  /* recognition stroke, primary CTA on light */
  --sage:   #5C8474;  /* calm accent — patient-comfort signals */

  /* Tier metals — only on recognition badges */
  --gold:   #C8A862;  /* Distinguished */
  --silver: #A6A29A;  /* Excellence */
  --bronze: #9B7B59;  /* Recognized */

  /* =================================================================
     COLOR — neutrals (derived from ink, on paper)
     ================================================================= */
  --ink-1:  #0A1F33;        /* primary text */
  --ink-2:  #34556B;        /* secondary text — also used as --info */
  --ink-3:  #6B7E8C;        /* tertiary text, metadata */
  --ink-4:  #9AA8B2;        /* placeholder, disabled */
  --ink-5:  rgba(10, 31, 51, 0.08); /* hairline border */
  --ink-6:  rgba(10, 31, 51, 0.04); /* subtle divider */

  /* On-paper soft surfaces */
  --paper-2: #F6F2EB;  /* hover surface on paper */
  --bone-2:  #EBE5DA;  /* hover surface on bone */
  --bone-3:  #DED7C9;  /* pressed / active inputs */

  /* =================================================================
     COLOR — semantic (use sparingly)
     ================================================================= */
  --ok:    #3A7A5A;   /* positive — completed surveys, verified marks */
  --info:  #34556B;   /* informational — same as --ink-2 */
  --alert: #C0392B;   /* EMERGENCY OVERLAY ONLY (severity ≥ 8 + danger) */

  /* Tints for soft semantic backgrounds */
  --ok-tint:    #E6F0EB;
  --info-tint:  #E5ECF2;
  --sage-tint:  #E7EEEB;
  --seal-tint:  #F4E4DD;
  --gold-tint:  #F4ECD9;
  --alert-tint: #F4DDD9;  /* emergency only */

  /* =================================================================
     TYPOGRAPHY — families
     ================================================================= */
  --font-display: "Source Serif 4", "Tiempos Headline", "GT Sectra", "Noto Serif Display", Georgia, serif;
  --font-body:    "Inter", "Söhne", "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — editorial, generous */
  --t-display-xl:  72px;  /* hero on landing */
  --t-display-lg:  56px;  /* methodology, council page heroes */
  --t-display-md:  44px;  /* section heroes */
  --t-display-sm:  32px;  /* page titles */

  --t-h1: 28px;
  --t-h2: 22px;
  --t-h3: 18px;
  --t-h4: 16px;

  --t-body-lg: 18px;  /* article body, reassuring patient copy */
  --t-body:    16px;  /* base */
  --t-body-sm: 15px;  /* card body */
  --t-meta:    14px;  /* metadata, tertiary */
  --t-fine:    11px;  /* AB 3030 disclosure ONLY */

  /* Line heights */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-base:   1.5;
  --lh-relaxed: 1.65;
  --lh-loose:  1.8;

  /* Letter-spacing */
  --ls-tight:  -0.02em;  /* display */
  --ls-snug:   -0.01em;  /* h1/h2 */
  --ls-base:   0;
  --ls-wide:   0.04em;   /* eyebrow labels */
  --ls-x-wide: 0.12em;   /* tier marks, "DISTINGUISHED 2026" */

  /* =================================================================
     SPACING — 8-pt grid
     ================================================================= */
  --s-1:    4px;
  --s-2:    8px;
  --s-3:    12px;
  --s-4:    16px;
  --s-6:    24px;
  --s-8:    32px;
  --s-12:   48px;
  --s-16:   64px;
  --s-24:   96px;
  --s-32:   128px;

  /* =================================================================
     RADIUS
     ================================================================= */
  --r-2:   4px;
  --r-3:   8px;   /* inputs */
  --r-4:   12px;  /* buttons */
  --r-5:   16px;  /* cards */
  --r-6:   24px;  /* modal sheets */
  --r-pill: 999px;

  /* =================================================================
     ELEVATION — two levels only
     ================================================================= */
  --shadow-soft: 0 1px 2px rgba(10, 31, 51, 0.04), 0 4px 12px rgba(10, 31, 51, 0.05);
  --shadow-lift: 0 4px 8px rgba(10, 31, 51, 0.05), 0 24px 48px rgba(10, 31, 51, 0.08);
  --shadow-focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--seal);

  /* =================================================================
     MOTION — quiet
     ================================================================= */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:  120ms;
  --t-base:  200ms;   /* default cross-fade */
  --t-slow:  600ms;   /* recognition reveal — once, never repeated */

  /* =================================================================
     LAYOUT
     ================================================================= */
  --content-max: 1140px;
  --article-max: 720px;
  --gutter:      32px;
  --gutter-sm:   16px;
}

/* =====================================================================
   SEMANTIC TYPOGRAPHY
   Apply these classes — do not re-derive from raw vars in product code.
   ===================================================================== */

html, body {
  background: var(--paper);
  color: var(--ink-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum" off, "kern" on, "liga" on;
}

/* Display — for hero moments, never inside cards */
.t-display-xl, .t-display-lg, .t-display-md, .t-display-sm,
h1.t-display, h2.t-display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--ink-1);
}
.t-display-xl { font-size: var(--t-display-xl); }
.t-display-lg { font-size: var(--t-display-lg); }
.t-display-md { font-size: var(--t-display-md); }
.t-display-sm { font-size: var(--t-display-sm); }

/* Headings — serif for editorial weight, sans where utility needed */
h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--ink-1);
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  color: var(--ink-1);
}
h3, .t-h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  color: var(--ink-1);
}
h4, .t-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  color: var(--ink-1);
}

/* Body */
p, .t-body { font-size: var(--t-body); line-height: var(--lh-base); color: var(--ink-1); }
.t-body-lg { font-size: var(--t-body-lg); line-height: var(--lh-relaxed); color: var(--ink-1); }
.t-body-sm { font-size: var(--t-body-sm); line-height: var(--lh-base); color: var(--ink-2); }

/* Meta + fine */
.t-meta {
  font-size: var(--t-meta);
  line-height: var(--lh-base);
  color: var(--ink-3);
}
.t-eyebrow {
  font-size: var(--t-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--ink-2);
}
.t-tier {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-x-wide);
  color: var(--ink-1);
}
.t-fine {
  /* AB 3030 disclosure — only sub-14 type allowed */
  font-size: var(--t-fine);
  line-height: 1.4;
  color: var(--ink-3);
  font-feature-settings: "tnum" on;
}

/* Numerics — tabular */
.t-num,
.cost,
.score,
.count {
  font-feature-settings: "tnum" on;
  font-variant-numeric: tabular-nums;
}

/* Links — editorial */
a, .t-link {
  color: var(--ink-1);
  text-decoration: underline;
  text-decoration-color: var(--ink-5);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
a:hover, .t-link:hover {
  color: var(--seal);
  text-decoration-color: var(--seal);
}
a:focus-visible, .t-link:focus-visible {
  outline: none;
  border-radius: var(--r-2);
  box-shadow: var(--shadow-focus);
}

/* Selection */
::selection {
  background: var(--gold-tint);
  color: var(--ink-1);
}

/* =====================================================================
   ACCESSIBILITY
   ===================================================================== */
*:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-2);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}