/* GovSignals Design System — Core Tokens
 * Distilled from Sales Assets.fig (top 30 colors + typography by usage count).
 * Use the CSS vars everywhere. Semantic vars wrap primitives.
 */

/* ──────────────────────────────────────────────────────────────
 * Primitive palette
 * ────────────────────────────────────────────────────────────── */
:root {
  /* Ink — dark neutrals. The near-black radial hero is the brand signature. */
  --ink-900: rgb(17, 21, 25);        /* 723× — primary text, hero bg, wordmark */
  --ink-800: rgb(13, 18, 23);        /*  62× — deepest end of radial hero */
  --ink-700: rgb(88, 99, 111);       /* 406× — secondary text, rules */
  --ink-0:   rgb(0, 0, 0);           /* 336× — occasional pure black */

  /* Paper — warm neutrals, the "kraft paper" base */
  --paper-50:  rgb(255, 255, 255);   /* 578× — surface white */
  --paper-100: rgb(247, 247, 247);   /* 140× — light utility gray */
  --paper-150: rgb(245, 241, 237);   /*  90× — warm off-white */
  --paper-200: rgb(244, 241, 237);   /*  46× — card fill "kraft" */
  --paper-250: rgb(238, 230, 224);   /*  29× */
  --paper-300: rgb(236, 232, 227);   /* 129× — soft warm divider */
  --paper-400: rgb(232, 226, 220);   /* 155× — warm border/rule */
  --paper-divider: rgb(231, 236, 240); /* 53× — cool divider alt */

  /* Clay — the signature warm brown / tan accent */
  --clay-900: rgb(119, 92, 73);      /* 148× — primary brand accent (module labels) */
  --clay-700: rgb(158, 102, 66);     /*  57× — testimonial text */
  --clay-500: rgb(161, 125, 96);     /*  89× — card border */
  --clay-300: rgb(216, 140, 86);     /*  37× — dashed callout border */
  --clay-100: rgb(245, 228, 208);    /* testimonial fill */

  /* Sky — muted blue-slate, the "enterprise" counterweight to clay */
  --sky-900: rgb(63, 134, 174);      /*  26× */
  --sky-700: rgb(122, 144, 168);     /* 101× — comparison card fill */
  --sky-500: rgb(120, 172, 202);     /*  63× — Community headline blue */
  --sky-300: rgb(169, 190, 213);     /*  84× */
  --sky-200: rgb(227, 237, 243);     /*  26× */
  --sky-shadow: rgba(120, 172, 202, 0.25);

  /* Sage — secondary accent, used sparingly */
  --sage-700: rgb(95, 106, 64);      /*  57× */
  --sage-500: rgb(94, 138, 134);     /*  76× */
  --sage-300: rgb(130, 193, 172);    /*  30× */

  /* Shadow tokens */
  --shadow-xs: 0 0 4px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 0 4px rgba(0, 0, 0, 0.10);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.25);
  --shadow-sky: 0 4px 16px var(--sky-shadow);

  /* Radii — the system is conservative: 2, 4, 5, 6 */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 5px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  /* Spacing — 4px base, conservative print-influenced scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Signature gradients */
  --grad-hero-radial: radial-gradient(rgba(17,21,25,0.8) 0%, rgb(17,21,25) 50%, rgb(17,21,25) 100%);
  --grad-hero-fade:   linear-gradient(rgb(17,21,25) 5%, rgba(17,21,25,0.2) 100%);
  --grad-surface:     linear-gradient(rgb(248,246,244) 0%, rgb(244,245,247) 100%);
}

/* ──────────────────────────────────────────────────────────────
 * Semantic tokens — reference these, not primitives, in products.
 * ────────────────────────────────────────────────────────────── */
:root {
  --fg-1:       var(--ink-900);      /* primary text */
  --fg-2:       var(--ink-700);      /* secondary text */
  --fg-accent:  var(--clay-900);     /* brand accent text (module labels) */
  --fg-on-dark: var(--paper-50);

  --bg-page:    var(--paper-50);
  --bg-canvas:  var(--paper-150);    /* warm off-white canvas */
  --bg-surface: var(--paper-50);
  --bg-card:    var(--paper-200);    /* kraft card */
  --bg-muted:   var(--paper-100);
  --bg-hero:    var(--ink-900);      /* dark hero card */
  --bg-compare: var(--sky-700);      /* "GovSignals side" of a comparison */

  --border-1:   var(--paper-400);    /* default border */
  --border-warm: var(--clay-500);    /* kraft-card border */
  --border-ink: var(--ink-900);
  --border-dashed-clay: 0.75px dashed var(--clay-300);
}

/* ──────────────────────────────────────────────────────────────
 * Theme surface tokens — dark-authored marketing sections funnel
 * their bg/fg through these so a single [data-theme="light"] flip
 * inverts them to light. Light/interlude sections keep their
 * literal GS_PAPER/GS_INK values and are unaffected.
 * ────────────────────────────────────────────────────────────── */
:root {
  --gs-surface: rgb(17, 21, 25);
  --gs-on-surface: #F5F1ED;
  --gs-on-surface-rgb: 245, 241, 237;
  --gs-surface-rgb: 17, 21, 25;
  --gs-surface-deep-rgb: 13, 17, 23;
}

[data-theme="light"] {
  --gs-surface: #F5F1ED;
  --gs-on-surface: rgb(17, 21, 25);
  --gs-on-surface-rgb: 17, 21, 25;
  --gs-surface-rgb: 245, 241, 237;
  --gs-surface-deep-rgb: 255, 255, 255;
}

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* White knockout logos (e.g. the hero FedRAMP mark) read as black in light mode. */
[data-theme="light"] .gs-fedramp-mark {
  filter: invert(1) grayscale(1) contrast(1.4);
}

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
}

/* ──────────────────────────────────────────────────────────────
 * Typography
 * Primary: Helvetica Neue (Weights: 300, 400, 500, 700)
 * Display: Neue Haas Grotesk Display Pro / ABC Favorit — not shipped
 *          substitute: Space Grotesk (display) + Inter (system fallback)
 * Mono:    Overpass Mono (4–7px in print; use for micro labels)
 *
 * SUBSTITUTION FLAGGED: ABC Favorit and Neue Haas Grotesk Display Pro
 * are paid foundry fonts. We substitute with Space Grotesk (Google
 * Fonts) which has similar grotesk proportions. Helvetica Neue is
 * available system-side on Mac/iOS; we fall back to Inter elsewhere.
 * ────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Overpass+Mono:wght@300;400;600&display=swap');

:root {
  --font-sans: "Helvetica Neue", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", "Neue Haas Grotesk Display Pro", "Helvetica Neue", "Inter", sans-serif;
  --font-mono: "Overpass Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* Type scale — calibrated for on-screen and 72dpi print one-pagers */
  --text-xs:   10px;   /* caption, legend */
  --text-sm:   11px;   /* body small, one-pager body */
  --text-base: 13px;   /* body */
  --text-md:   14px;   /* emphasized body */
  --text-lg:   16px;   /* section label */
  --text-xl:   22px;   /* subhead */
  --text-2xl:  31px;   /* hero headline (print) */
  --text-3xl:  48px;   /* screen hero */
  --text-4xl:  72px;   /* slide headline */
}

/* ──────────────────────────────────────────────────────────────
 * Base element styles — use as reset baseline
 * ────────────────────────────────────────────────────────────── */
html, body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.45;
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 500; letter-spacing: -0.01em; }
h1 { font-size: var(--text-3xl); line-height: 1.05; }
h2 { font-size: var(--text-2xl); line-height: 1.1; }
h3 { font-size: var(--text-xl);  line-height: 1.2; }
h4 { font-size: var(--text-lg);  line-height: 1.25; }

.display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; }
.eyebrow { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-md); color: var(--fg-accent); }
.label-module { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-base); color: var(--fg-accent); text-align: center; }
.caption  { font-size: var(--text-xs); color: var(--fg-2); }
.mono     { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.02em; }

p  { margin: 0 0 var(--space-3) 0; }
a  { color: var(--fg-1); text-decoration: underline; text-underline-offset: 2px; }
a:hover { opacity: 0.7; }

hr { border: 0; border-top: 0.25px solid var(--border-warm); margin: var(--space-4) 0; }