/* ════════════════════════════════════════════════════════════════════
   tokens.css — SINGLE SOURCE OF TRUTH for the I Do Home Inspections
   design system. Every color, type step, spacing unit, border, radius,
   and font family lives here as a CSS custom property on :root.

   styles.css and the per-page styles consume these tokens via var(),
   so the entire site can be re-themed by editing this one file.

   Load order on every page:  fonts → tokens.css → styles.css → page styles
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ─────────────────────────────────────────────────────────────────
     1. COLOR — raw scales
     ───────────────────────────────────────────────────────────────── */

  /* Navy — PRIMARY brand scale (100 lightest → 900 darkest). Used for
     structure, links, eyebrows, active states, icons, dark surfaces. */
  --navy-50:  #eef2fb;
  --navy-100: #d7e0f3;
  --navy-200: #b0c3e6;
  --navy-300: #859fd6;
  --navy-400: #5c79c0;
  --navy-500: #3c59a6;
  --navy-600: #2b4488;
  --navy-700: #20356b; /* primary base — buttons-of-record, links */
  --navy-800: #16264c;
  --navy-900: #0d182f;

  /* Warm orange-red — ACCENT scale. RESERVED for CTAs / highlights only. */
  --accent-50:  #fff2ee;
  --accent-100: #ffe1d6;
  --accent-200: #ffc3ad;
  --accent-300: #ff9d79;
  --accent-400: #fb7546;
  --accent-500: #ee5524;
  --accent-600: #c63f16; /* accent base — CTA fill (white text passes AA) */
  --accent-700: #a23210;
  --accent-800: #82290f;
  --accent-900: #66220f;

  /* Neutral grays + extremes */
  --white:    #ffffff;
  --black:    #000000;
  --gray-50:  #fafafa;
  --gray-100: #f5f5f7;
  --gray-200: #e8e8ed;
  --gray-300: #d2d2d7; /* hairline color */
  --gray-400: #a1a1a6;
  --gray-500: #6e6e73;
  --gray-600: #4b4b50;
  --gray-700: #424245;
  --gray-800: #2d2d2f;
  --gray-900: #1d1d1f; /* near-black text / dark surface ink */

  /* ─────────────────────────────────────────────────────────────────
     2. COLOR — semantic tokens (what styles.css actually consumes)
     ───────────────────────────────────────────────────────────────── */
  --color-primary:            var(--navy-700);
  --color-primary-hover:      var(--navy-800);
  --color-primary-tint:       var(--navy-50);   /* soft fill behind chips */
  --color-primary-tint-border:var(--navy-200);
  --color-link-on-dark:       var(--navy-300);  /* links over dark sections */

  --color-accent:             var(--accent-600); /* CTAs / highlights ONLY */
  --color-accent-hover:       var(--accent-700);
  --color-accent-tint:        var(--accent-50);

  --color-text:        var(--gray-900);
  --color-text-soft:   var(--gray-600);
  --color-text-muted:  var(--gray-500);
  --color-text-subtle: var(--gray-400);

  --color-surface:        var(--white);
  --color-surface-muted:  var(--gray-100);
  --color-surface-faint:  var(--gray-50);

  --color-ink:       var(--gray-900); /* dark section backgrounds */
  --color-ink-soft:  var(--gray-800); /* dark gradient end stop */

  --color-border:        var(--gray-300); /* hairline / card borders */
  --color-border-dark:   var(--gray-700); /* borders on dark surfaces */
  --color-border-light:  #f0f0f0;         /* faint internal separators */

  --color-star: #f5a623; /* review star gold — intentionally not navy */

  /* ─────────────────────────────────────────────────────────────────
     3. TYPOGRAPHY
     ───────────────────────────────────────────────────────────────── */
  --font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono",
    Menlo, Consolas, monospace;

  /* Type scale — 16px base, ~1.2–1.25 modular ratio */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */

  /* ─────────────────────────────────────────────────────────────────
     4. SPACING — 4px base (--space-N = N × 4px)
     ───────────────────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-13: 52px;
  --space-14: 56px;
  --space-15: 60px;
  --space-16: 64px;

  /* ─────────────────────────────────────────────────────────────────
     5. BORDERS & RADIUS
     ───────────────────────────────────────────────────────────────── */
  --border-hairline: 1px;   /* spec hairline */
  --border-thin:     0.5px;  /* sub-pixel hairline used throughout the UI */
  --border-strong:   1.5px;
  --border-heavy:    2px;

  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-xl:   14px;
  --radius-2xl:  16px;
  --radius-3xl:  18px;  /* default card radius */
  --radius-4xl:  22px;
  --radius-pill: 999px;

  /* ─────────────────────────────────────────────────────────────────
     6. LAYOUT RHYTHM
     ───────────────────────────────────────────────────────────────── */
  --section-pad-y: var(--space-16); /* 64px — one section vertical scale */
  --section-pad-x: var(--space-8);  /* 32px — one section gutter scale   */
  --measure:       65ch;            /* readable body line length         */
  --measure-tight: 54ch;            /* tighter measure for leads/sublines */
}