/* ==========================================================================
   Godspeed design tokens -- the single source of truth for colour, type and
   shape. Loaded first on every page, before any other stylesheet.

   Why this file exists: the site carried two base stylesheets, style.css and
   styles.css, which defined the same ideas under different names with
   different values (--color-primary against --brand-blue, #1d1d1f against
   #333333, amber against orange). Nothing could be written once. Every new
   rule belongs here or consumes what is here; no component defines its own
   brand colour again.

   Brand blue is #2563eb, decided 2026-09-22 against a side-by-side of the two
   candidates. See claude/PLAN-website-redesign.md.
   ========================================================================== */

:root {
    /* --- Brand -------------------------------------------------------- */
    --gs-blue: #2563eb;
    --gs-blue-hover: #1d4ed8;

    /* #2563eb on black measures 3.94:1, under the 4.5:1 floor for normal
       text. It is fine as a large headline accent, which needs only 3:1.
       Anything smaller sitting on a dark surface uses this lighter blue,
       which measures 7.0:1 on #050505. */
    --gs-blue-on-dark: #4d9fff;

    --gs-blue-tint: rgba(37, 99, 235, 0.1);
    --gs-blue-glow: rgba(37, 99, 235, 0.3);

    /* --- Neutrals ----------------------------------------------------- */
    --gs-black: #050505;
    --gs-ink: #1d1d1f;
    --gs-ink-soft: #424245;
    --gs-muted: #6e6e73;
    --gs-grey: #86868b;
    --gs-line: #d2d2d7;
    --gs-line-soft: #e8e8ed;
    --gs-bg: #f5f5f7;
    --gs-surface: #ffffff;

    /* --- Status ------------------------------------------------------- */
    --gs-danger: #c0392b;
    --gs-success: #166534;
    --gs-warning: #b45309;

    /* Accent, from the Creative Brief. Used sparingly and never as the
       primary action colour, which is always the blue. */
    --gs-accent: #FF4500;

    /* --- Type --------------------------------------------------------- */
    /* Inter and Syncopate only. Never a serif, and never an outside face. */
    --gs-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --gs-font-display: 'Syncopate', 'Inter', sans-serif;

    /* --- Shape -------------------------------------------------------- */
    --gs-radius-sm: 8px;
    --gs-radius: 12px;
    --gs-radius-lg: 16px;
    --gs-radius-card: 24px;
    --gs-radius-pill: 999px;

    /* --- Motion ------------------------------------------------------- */
    --gs-transition-fast: 0.15s ease;
    --gs-transition: 0.2s ease;
    --gs-transition-slow: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* ==================================================================
       Back-compatible aliases.

       Both base stylesheets already declare these names and hundreds of
       rules read them. Pointing the old names at the new tokens migrates
       every one of those rules at once, without touching them, and means
       the two sheets can no longer disagree. They stay until the merge in
       Phase 2 removes the duplicate declarations; nothing new should use
       them.
       ================================================================== */

    /* was style.css */
    --color-bg: var(--gs-bg);
    --color-surface: var(--gs-surface);
    --color-primary: var(--gs-blue);
    --color-primary-glow: var(--gs-blue-glow);
    --color-text: var(--gs-ink);
    --color-text-muted: var(--gs-grey);
    --color-accent: var(--gs-accent);
    --font-main: var(--gs-font-sans);
    --transition-fast: var(--gs-transition-fast);
    --transition-smooth: var(--gs-transition-slow);
    --radius-pill: var(--gs-radius-pill);
    --radius-card: var(--gs-radius-card);

    /* Carried over verbatim from the sheets these tokens replaced. Rules still
       reference them, so they keep their original values rather than being
       re-invented; they fold into the scale above in Phase 2. */
    --radius-badge: 4px;
    --radius-input: 12px;
    --shadow-lift: 0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.05);
    --transition: all 0.2s ease;
    --transition-slow: all 0.3s ease;

    /* was styles.css */
    --primary-color: var(--gs-black);
    --brand-blue: var(--gs-blue);
    --interaction-blue: var(--gs-blue-hover);
    --accent-color: var(--gs-accent);
    --text-light: var(--gs-surface);
    --text-dark: var(--gs-ink);
    --bg-light: var(--gs-bg);
    --bg-dark: #1A1A1A;
    --brand-black: var(--gs-black);
    --brand-dark: #121212;
}