/* ==========================================================================
   site.css — shared design tokens for the LoadMetric Pro website.

   SINGLE SOURCE OF TRUTH for brand styling (colors, ink, surfaces, gradients,
   spacing, easing). Every public page links this BEFORE its own <style>, so
   page-specific rules can still override. The web app (app/app.css) mirrors
   these values; keep the two in sync, with this file as the canonical source.
   ========================================================================== */
:root {
    /* ── Brand + accents ──────────────────────────────── */
    --brand: #6B5CE7;             /* single brand hero */
    --brand-deep: #4A3DD6;        /* focus, hover, body links */
    --brand-soft: #EEEBFB;        /* tints, chip backgrounds */
    --accent-positive: #00B894;   /* "on track" — tuned down from #00D4AA for WCAG */
    --accent-warm: #FF6B9D;       /* highlight, used sparingly */

    /* ── Surfaces ─────────────────────────────────────── */
    --surface: #FAF7F2;           /* page canvas (cream) */
    --surface-elev: #FFFFFF;      /* cards */
    --surface-sunk: #F2EEE7;      /* deeper than canvas */

    /* ── Ink scale (WCAG AA on cream) ─────────────────── */
    --ink-1: #0F0F10;             /* primary text */
    --ink-2: #3D3D42;             /* secondary text — 9.8:1 */
    --ink-3: #6E6E72;             /* tertiary text — 4.8:1 */

    /* ── Lines + focus ────────────────────────────────── */
    --line: rgba(15, 15, 16, 0.08);
    --line-strong: rgba(15, 15, 16, 0.14);
    --focus-ring: 0 0 0 3px rgba(107, 92, 231, 0.35);

    /* ── Reserved "money shot" gradients ──────────────── */
    --gradient: linear-gradient(135deg, #6B5CE7, #FF6B9D);
    --tri-gradient: linear-gradient(135deg, #6B5CE7 0%, #FF6B9D 50%, #00B894 100%);

    /* ── Legacy aliases (keep older pages' var names working) ── */
    --purple: var(--brand);
    --pink: var(--accent-warm);
    --teal: var(--accent-positive);
    --cream: var(--surface);
    --dark: var(--ink-1);
    --text-secondary: var(--ink-2);
    --text-tertiary: var(--ink-3);

    /* ── Spacing scale ────────────────────────────────── */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-7: 32px;
    --s-8: 48px;

    /* ── Unified easing ───────────────────────────────── */
    --ease-snappy: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}