/* ═══════════════════════════════════════════════════════════════
   RollForge Design Tokens — Global CSS Custom Properties
   Single source of truth for color, typography, spacing, radii,
   and shadows across all marketing and app surfaces.

   Font loading: Self-hosted woff2 (no Google Fonts CDN).
   Files downloaded at build time by scripts/download-fonts.js.
   Falls back to system fonts on first deploy before download runs.
   ═══════════════════════════════════════════════════════════════ */

/* ── Self-hosted Fonts ─────────────────────────────────────────
   Inter: clean humanist sans (replaces Space Grotesk — same feel,
   no subprocessor dependency). latin subset only (covers all trade
   business names in the target market).
   font-display: swap prevents FOIT; text shows in system font while
   Inter loads, no layout shift (same metrics as Space Grotesk).     */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ── JetBrains Mono ─────────────────────────────────────────────
   Tabular numbers for financial figures (each digit same width,
   so $1,234.56 and $9,999.99 align cleanly in tables/KPI cards).  */

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ── Design Tokens ─────────────────────────────────────────────
   All values addressable as CSS variables in DevTools.
   Reference: var(--rf-<token>) everywhere; never hard-code hex.    */

:root {
  /* ── Font Families ── */
  --rf-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --rf-font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* ── Color: Backgrounds ── */
  --rf-bg:          #faf9f7;   /* page canvas — warm off-white */
  --rf-bg-elevated: #ffffff;   /* cards, modals, popovers */

  /* ── Color: Text ── */
  --rf-text-primary:   #1a1a1a;   /* body, headings */
  --rf-text-secondary: #525252;   /* supporting labels */
  --rf-text-muted:     #8a8a8a;   /* placeholders, timestamps */

  /* ── Color: Accent (steel blue brand primary) ── */
  --rf-accent:       #6D8196;
  --rf-accent-hover: #5A7A9B;

  /* ── Color: Border ── */
  --rf-border: rgba(0, 0, 0, 0.08);

  /* ── Color: Status ── */
  --rf-success: #16A34A;   /* green — positive delta, on-track */
  --rf-warning: #D97706;   /* amber — at-risk, watch */
  --rf-danger:  #DC2626;   /* red   — critical, overdue */

  /* ── Type Scale (modular scale 1.25 × 0.75rem base) ──
     xs  → 0.600rem  ≈  9.6px  labels, badges
     sm  → 0.750rem  ≈ 12.0px  secondary text
     base→ 0.875rem  ≈ 14.0px  body copy
     md  → 1.000rem  = 16.0px  prominent body
     lg  → 1.125rem  ≈ 18.0px  card titles
     xl  → 1.375rem  ≈ 22.0px  section headings
     2xl → 1.750rem  ≈ 28.0px  page headings
     3xl → 2.250rem  ≈ 36.0px  hero sub-headings
     4xl → 3.000rem  ≈ 48.0px  large hero headings
     5xl → 3.750rem  ≈ 60.0px  display headlines       */
  --rf-text-xs:   0.600rem;
  --rf-text-sm:   0.750rem;
  --rf-text-base: 0.875rem;
  --rf-text-md:   1.000rem;
  --rf-text-lg:   1.125rem;
  --rf-text-xl:   1.375rem;
  --rf-text-2xl:  1.750rem;
  --rf-text-3xl:  2.250rem;
  --rf-text-4xl:  3.000rem;
  --rf-text-5xl:  3.750rem;

  /* ── Spacing (4px base grid) ── */
  --rf-space-1:   4px;
  --rf-space-2:   8px;
  --rf-space-3:  12px;
  --rf-space-4:  16px;
  --rf-space-5:  20px;
  --rf-space-6:  24px;
  --rf-space-8:  32px;
  --rf-space-10: 40px;
  --rf-space-12: 48px;
  --rf-space-14: 56px;
  --rf-space-16: 64px;

  /* ── Radii ── */
  --rf-radius-sm:   4px;
  --rf-radius-md:   8px;
  --rf-radius-lg:  12px;
  --rf-radius-full: 9999px;

  /* ── Shadows ── */
  --rf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.03);
  --rf-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
  --rf-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.08);
}