/* ============================================================
 * dt-tokens.css — Dentaltourism Design Tokens
 * Visual Identity · Brand Guidelines v1.0 · 2026
 * ============================================================
 *
 * THIS FILE IS THE SINGLE SOURCE OF TRUTH FOR:
 *   - Colors
 *   - Typography (families, sizes, line-heights, tracking)
 *   - Spacing (8pt grid)
 *   - Hairline rule definitions
 *
 * USAGE RULES — DO NOT VIOLATE
 * ----------------------------------------------------------
 * 1. Never mix raw hex codes outside this file.
 *    Always reference via var(--color-x) or var(--font-x).
 *
 * 2. Verified Gold (--color-accent / #C19A4B)
 *    — Reserved for trust marks: principles, verified, curated
 *    — Max 2 uses per page
 *    — Four Principles block counts as ONE group, not four
 *    — Never used for backgrounds, buttons, or decoration
 *
 * 3. Color role assignment:
 *    --color-primary   →  H1, H2, brand identity moments
 *    --color-anchor    →  Body emphasis, strongest titles
 *    --color-neutral   →  Metadata, captions, secondary info
 *    --color-bg-primary →  Page background (Warm Paper)
 *    --color-bg-secondary → Cards, breathing surfaces
 *    --color-accent    →  Trust marks ONLY (see rule 2)
 *
 * 4. Editorial discipline:
 *    — border-radius: 0–2px max
 *    — No box-shadow; hairline rules only
 *    — hover: underline, not color change
 *    — body line-height 1.6–1.7; headline 1.2–1.3
 *    — paragraph max-width 65–72ch
 *
 * Reference voice: The Economist, Bloomberg, Stratechery
 * ============================================================ */

:root {

  /* ---------- COLOR PALETTE (PDF p.08) ---------- */

  --color-primary:        #1E3A5F;   /* Slate Indigo — primary voice */
  --color-anchor:         #0F172A;   /* Ink Black — strongest titles */
  --color-bg-primary:     #F5F1E8;   /* Warm Paper — page surface */
  --color-bg-secondary:   #FFFFFF;   /* Pure White — cards */
  --color-accent:         #C19A4B;   /* Verified Gold — max 2/page */
  --color-neutral:        #94A3B8;   /* Mist Gray — metadata */

  /* Derived shades — for hairlines, hover, secondary text */
  --color-text-body:      #2F4054;   /* slightly warmer than anchor */
  --color-text-secondary: #52616B;   /* secondary body text */
  --color-hairline:       rgba(148, 163, 184, 0.4);  /* Mist Gray @ 40% */
  --color-hairline-soft:  rgba(148, 163, 184, 0.2);  /* Mist Gray @ 20% */
  --color-link-hover:     #2E4A7A;   /* Indigo +10% lightness */
  --color-paper-shade:    #EFE9D9;   /* Warm Paper slightly darker */


  /* ---------- TYPOGRAPHY FAMILIES (PDF p.09) ---------- */

  --font-display: "Source Serif Pro", "Tiempos Headline",
                  "Noto Serif SC", Georgia, "Times New Roman", serif;

  --font-body:    "Inter", "Söhne",
                  "Noto Sans SC", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, sans-serif;

  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --font-italic:  "Source Serif Pro", "Tiempos Italic",
                  "Noto Serif SC", Georgia, serif;


  /* ---------- TYPE SCALE (PDF p.10) ---------- */

  --fs-h1:      4rem;        /* 64pt — H1 Display */
  --fs-h2:      2.5rem;      /* 40pt — H2 Section */
  --fs-h3:      1.625rem;    /* 26pt — H3 Sub */
  --fs-lead:    1.25rem;     /* 20pt — Body L Lead */
  --fs-body:    1rem;        /* 16pt — Body Regular */
  --fs-caption: 0.75rem;     /* 12pt — Caption Micro */


  /* ---------- LINE HEIGHTS ---------- */

  --lh-display:  1.1;
  --lh-headline: 1.25;
  --lh-body:     1.65;
  --lh-caption:  1.4;


  /* ---------- LETTER SPACING ---------- */

  --ls-caps:     0.12em;     /* small caps */
  --ls-display: -0.02em;     /* tight display */
  --ls-body:     0;


  /* ---------- SPACING (8pt grid) ---------- */

  --space-1: 0.5rem;    /* 8 */
  --space-2: 1rem;      /* 16 */
  --space-3: 1.5rem;    /* 24 */
  --space-4: 2rem;      /* 32 */
  --space-5: 3rem;      /* 48 */
  --space-6: 4rem;      /* 64 */
  --space-7: 6rem;      /* 96 */
  --space-8: 8rem;      /* 128 */


  /* ---------- BORDERS ---------- */

  --border-hairline:      1px solid var(--color-hairline);
  --border-hairline-soft: 1px solid var(--color-hairline-soft);
  --border-radius-sm:     2px;
  --border-radius:        0;


  /* ============================================================
   * LEGACY ALIAS LAYER — gradual migration
   * Old variable names map onto the new PDF palette so that any
   * existing rule referencing var(--cobalt-blue) etc. still works
   * but renders in the correct brand color.
   * Remove this block once every page has been migrated.
   * ============================================================ */

  --jordy-blue:   var(--color-primary);
  --tufts-blue:   var(--color-primary);
  --alice-blue:   var(--color-bg-primary);
  --cobalt-blue:  var(--color-primary);
  --cool-black:   var(--color-anchor);
  --eerie-black:  var(--color-anchor);
}


/* ============================================================
 * BASE TYPOGRAPHY — Applied globally so pages inherit defaults
 * Pages can still override locally, but never with raw hex.
 * ============================================================ */

html {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-anchor);
  background-color: var(--color-bg-primary);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg-primary);
  color: var(--color-anchor);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-primary);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-display);
  font-weight: 700;
}


/* ============================================================
 * UTILITY CLASSES — opt-in for editorial moments
 * Pages can apply these without inventing their own styles.
 * ============================================================ */

.dt-mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
}

.dt-italic-accent {
  font-family: var(--font-italic);
  font-style: italic;
}

.dt-caps {
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--color-neutral);
}

.dt-hairline {
  border: none;
  border-top: var(--border-hairline);
  margin: 0;
}

.dt-trust-mark {
  /* Only this class is allowed to use Verified Gold.
     Audit page-by-page: max 2 instances per page. */
  color: var(--color-accent);
}

/* Medical review byline — used on YMYL guide pages.
   Sits under the H1/subtitle to expose reviewer + last reviewed date. */
.dt-byline {
  margin-top: 1.125rem;
  padding: 0.875rem 0;
  border-top: var(--border-hairline-soft);
  border-bottom: var(--border-hairline-soft);
  font-size: 0.94rem;
  max-width: 60ch;
}
.dt-byline p {
  margin: 0.25rem 0;
  color: var(--color-text-body);
  line-height: 1.5;
}
.dt-byline .dt-byline-reviewer strong {
  color: var(--color-primary);
  font-weight: 600;
}
.dt-byline .dt-byline-date {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--color-neutral);
  margin-top: 0.375rem;
}