/* =========================================================
   DVI · Design Tokens
   Dealer Visibility Index — dealervisibilityindex.com
   v1.0 · 2026
   ========================================================= */

:root {
  /* ---------- Color · Brand ---------- */
  --dvi-ink:        #0A1628;  /* Headlines, logo arc, footer, primary button */
  --dvi-graphite:   #1F2937;  /* Default sans text, secondary mark elements */
  --dvi-blue:       #1266F1;  /* Single accent — links, eyebrows, italic emphasis */
  --dvi-blue-soft:  #EAF2FF;  /* Tag chip backgrounds, hover tints on light */
  --dvi-blue-light: #7BA8FF;  /* Use only on dark surfaces (footer / featured card) */

  /* ---------- Color · Surface ---------- */
  --dvi-white:      #FFFFFF;  /* Default surface */
  --dvi-mist:       #F6F8FB;  /* Section bands, card hover */
  --dvi-border:     #E3E8EF;  /* Every hairline rule */

  /* ---------- Color · Text ---------- */
  --dvi-body:       #425466;  /* Long-form body copy, mono micro-labels */

  /* ---------- Color · Status ---------- */
  --dvi-status-ok:  #22C55E;  /* "Reviewed" dot only — never elsewhere */

  /* ---------- Aliases (semantic) ---------- */
  --color-bg:               var(--dvi-white);
  --color-bg-muted:         var(--dvi-mist);
  --color-border:           var(--dvi-border);
  --color-text:             var(--dvi-graphite);
  --color-text-muted:       var(--dvi-body);
  --color-text-strong:      var(--dvi-ink);
  --color-accent:           var(--dvi-blue);
  --color-accent-soft:      var(--dvi-blue-soft);

  /* ---------- Typography · Families ---------- */
  --dvi-serif: "Source Serif 4", ui-serif, Georgia, serif;
  --dvi-sans:  "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --dvi-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Typography · Scale ---------- */
  --dvi-fs-h1:        clamp(40px, 5.6vw, 76px);
  --dvi-fs-h2:        clamp(30px, 3.4vw, 46px);
  --dvi-fs-h3:        22px;
  --dvi-fs-h4:        15px;
  --dvi-fs-lede:      clamp(17px, 1.35vw, 19px);
  --dvi-fs-body:      16px;
  --dvi-fs-small:     14px;
  --dvi-fs-micro:     11px;       /* mono eyebrow / label */
  --dvi-fs-nano:      9.5px;      /* footer mono lockup sub */

  /* ---------- Typography · Tracking ---------- */
  --dvi-track-tight:  -0.025em;
  --dvi-track-h2:     -0.02em;
  --dvi-track-h3:     -0.01em;
  --dvi-track-mono-1: 0.14em;
  --dvi-track-mono-2: 0.16em;
  --dvi-track-mono-3: 0.18em;

  /* ---------- Layout ---------- */
  --dvi-maxw:    1240px;
  --dvi-gutter:  clamp(20px, 4vw, 56px);

  /* ---------- Spacing ---------- */
  --dvi-section-y: clamp(64px, 9vw, 120px);
  --dvi-card-pad:  32px;

  /* ---------- Radii ---------- */
  --dvi-radius-xs: 2px;   /* tags, buttons */
  --dvi-radius-sm: 3px;   /* section-label num chip */
  --dvi-radius-md: 4px;   /* cards */

  /* ---------- Borders ---------- */
  --dvi-hairline: 1px solid var(--dvi-border);

  /* ---------- Motion ---------- */
  --dvi-transition-fast: 0.15s ease;
  --dvi-transition-med:  0.2s ease;

  /* ---------- Z-index ---------- */
  --dvi-z-header: 50;
}

/* ---------- Optional: data attribute hook for future dark mode ---------- */
[data-theme="dark"] {
  --color-bg: var(--dvi-ink);
  --color-bg-muted: #0E1B30;
  --color-border: rgba(255,255,255,0.10);
  --color-text: rgba(255,255,255,0.85);
  --color-text-muted: rgba(255,255,255,0.60);
  --color-text-strong: var(--dvi-white);
  --color-accent-soft: rgba(18,102,241,0.18);
}