/* ============================================================
   Servable copy of src/styles/tokens.css — Astro's static output only
   bundles CSS a component imports, and nothing currently imports this
   file, so it is duplicated here to be reachable at /assets/tokens.css
   the same way ga.css is. Keep both files identical; src/styles/tokens.css
   remains the documented source referenced by docs/SITE-SPEC.md.
   ============================================================ */

/* ============================================================
   GrowthAgents — M1 design system tokens
   Source: "GrowthAgents Dark System" canvas (Tokens artboard +
   Main / BlogPost / StandardPage artboards), extracted verbatim.
   This is the target system for the M1 dark direction. It is a
   separate token set from the live site's current palette in
   public/assets/ga.css — nothing here is wired into rendered pages
   yet. See docs/SITE-SPEC.md for the layout contract these values
   back, including the reconciliation notes on where this file's
   authoring source (the canvas) had internal drift.
   ============================================================ */

:root {
  /* ============================================================
     SINGLE SOURCE OF TRUTH for the site palette.
     Light ground, v2.1 approved. ga.css and ga-kit.css consume
     these; neither declares a competing :root. Do not reintroduce
     a palette declaration in any other stylesheet.
     ============================================================ */

  /* ---------- ground (light) ---------- */
  --bg: #F7F6F4;          /* page */
  --bg-2: #F1EFF2;        /* section-level surface */
  --surface: #FFFFFF;     /* cards, elevated panels */
  --elevated: #FFFFFF;    /* alias of --surface, kept for ga.css */
  --white: #FFFFFF;
  --hairline: #E7E5E9;
  --line: #E7E5E9;

  /* ---------- text on light ---------- */
  --text: #111827;        /* primary */
  --text-2: #5B6472;      /* secondary / muted */
  --body: #26272B;
  --muted: #6B7280;
  --muted-strong: #5B6472;

  /* ---------- deliberate dark bands ----------
     hero, closing CTA band, footer, terminal props. These stay dark
     on a light page and own their own text colors. */
  --black: #060609;
  --code-bg: #0C0C12;
  --on-dark-head: #F3F4F9;
  --on-dark-body: #C3C7D3;
  --rule-dark: rgba(255, 255, 255, 0.10);
  --surface-slate: #14151C;
  --surface-steel: #1C1D26;
  --surface-steel-hi: #23242F;

  /* ---------- purple ----------
     --purple-text is the lavender accent for DARK bands only; it is
     unreadable on the light ground. --brand-soft is its light-ground
     counterpart. Never use either as body copy. */
  --purple-text: #D8B4FE;
  --brand-soft: #8E248D;
  --violet-wash: #F3EDFA;
  --violet-wash-deep: #EADFF2;

  /* purple family — fills, borders, gradients ONLY. */
  --p1: #5B2D91;
  --p2: #8E248D;
  --p3: #A61DB1;
  --grad: linear-gradient(35deg, var(--p1), var(--p2) 55%, var(--p3));
  --violet-800: #5B2D91;
  --violet-600: #8E248D;
  --violet-500: #A61DB1;
  --rule-light: var(--line);
  --rule-light-strong: rgba(17, 24, 39, 0.16);

  /* ---------- compatibility aliases ----------
     --light-* named the "deliberately light band" back when the page
     was dark. The page is light now, so they are the page defaults.
     --surface-mist-deep was referenced by ga-kit.css but never
     declared (pre-existing on main) — two elements rendered with no
     background. It is a subtle section surface. */
  --light-bg: var(--bg);
  --light-text: var(--text);
  --light-text-2: var(--text-2);
  --light-hair: var(--line);
  --surface-mist: var(--bg-2);
  --surface-mist-deep: var(--bg-2);
  --light-hair: rgba(17, 24, 39, 0.14);

  /* ---------- type ---------- */
  --font-disp: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Display threshold: --font-disp is used at 32px and up ONLY.
     Below 32px, headings use --font-body. The sole documented
     exception is the nav wordmark logotype (17px) — a logotype, not
     a heading. See docs/SITE-SPEC.md. */
  --type-display-threshold: 32px;

  --text-hero: 64px;      /* line-height 1.05, weight 800, --font-disp */
  --text-h2: 40px;         /* line-height 1.1,  weight 700, --font-disp */
  --text-h3: 19px;         /* line-height 1.3,  weight 600, --font-body (< threshold) */
  --text-body-l: 19px;     /* line-height 1.6,  weight 400, --font-body */
  --text-body-m: 16px;     /* line-height 1.6,  weight 400, --font-body */
  --text-eyebrow: 12px;    /* --font-mono, weight 500, uppercase, tracking below */
  --tracking-eyebrow: 0.08em;

  /* ---------- spacing — section padding-block, by density tier ---------- */
  /* Dense: tables, spec lists, comparison grids. Ink-coverage floor 0.55. */
  --space-dense-min: 48px;
  --space-dense-max: 64px;
  /* Standard: feature rows, card grids, FAQ. Ink-coverage floor 0.40. */
  --space-standard-min: 72px;
  --space-standard-max: 96px;
  /* Statement: hero, pull-quote, closing CTA. Ink-coverage floor 0.25
     (closing CTAs are exempt from the floor — see SITE-SPEC.md). */
  --space-statement-min: 112px;
  --space-statement-max: 160px;

  /* ---------- radii ---------- */
  --radius-sm: 8px;    /* buttons */
  --radius-md: 10px;   /* cards */
  --radius-pill: 999px; /* tags, badges */

  /* ---------- containers ---------- */
  --wrap-max: 1200px;  /* default container — scanned content: hero copy,
                           feature rows, card grids, tables, CTA bands */
  --wrap-read: 820px;  /* long-form prose only — legal pages, article body.
                           Never for grids: a 2-column grid always takes
                           --wrap-max, even when its copy reads short. */

  /* ---------- breakpoints ---------- */
  /* Mobile-first, min-width only. @media cannot consume custom
     properties, so these are documentation — every real @media in
     public/assets/ga.css and src/legacy/*/head.html is hand-kept in
     sync with these literal values. */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ---------- easing ---------- */
  --e: cubic-bezier(.23, 1, .32, 1);       /* strong ease-out — default transition */
  --e-io: cubic-bezier(.77, 0, .175, 1);   /* strong ease-in-out */
  --e-linear: linear;                       /* reading-progress bar only */

  /* ---------- status ---------- */
  /* Not part of the original "GrowthAgents Dark System" canvas brief — added
     during the sitewide ga.css conversion (see docs/SITE-SPEC.md) so the
     live site's success/warning/danger states (tags, form validation, the
     "never touch" checklist) can be tokenized instead of hardcoding hex in
     ga.css. Values are the site's pre-existing colors, unchanged. */
  --status-success: #12B981;
  --status-warning: #F59E0B;
  --status-danger: #EF4444;

  /* Status colours used as TEXT need darker variants on the light ground:
     #12B981 measures 2.08-2.35:1 on the page and on its own pale tint.
     The bright values above stay for fills, borders and dark bands. */
  --status-success-text: #05684A;   /* >=5.57:1 on every ground in use */
  --status-warning-text: #8A5A00;   /* >=4.85:1 */
  --status-danger-text:  #B3261E;   /* >=5.35:1 */
}