/* ============================================================
 * Alpha FPL Design Tokens — Phase 0 foundation.
 *
 * Source of truth for color, type, motion, surface and density.
 * All later surfaces (marketing, auth, app) consume these vars;
 * no template should hard-code hex values, font sizes, or
 * easings outside this file.
 *
 * Spec: docs/superpowers/specs/2026-04-25-fpl-design-system-phase0-design.md
 * ============================================================ */

:root {
  /* ---------- Brand & semantic color ---------- */
  --green: #12E665;            /* primary signal · positive · "up/own/buy" */
  --green-deep: #0A8F3F;       /* hover · pressed · charts */
  --navy: #051B2C;             /* anchor · marketing text · brand */
  --navy-app: #0A0F1A;         /* app default surface */
  --navy-app-raised: #15192A;  /* app elevated surface (cards, panels) */
  --coral: #FF4757;            /* negative · "down/out/alert" */
  --amber: #F59E0B;            /* caution · neutral hold */

  /* Accent — splash-only. Used in hero ball color clusters and chart
     highlights. Not promoted to a semantic role; do not use for status. */
  --cyan: #22D3EE;

  /* ---------- Surfaces ---------- */
  --paper: #FFFFFF;            /* marketing primary */
  --paper-soft: #F8FAFC;       /* marketing secondary */

  /* ---------- Text ramps ----------
     ink — for marketing/auth (light surfaces): navy → slate
     mute — for app (dark surfaces): white → slate */
  --ink-1: #051B2C;            /* primary heading on paper */
  --ink-2: #0F2A40;            /* heading-secondary */
  --ink-3: #475569;            /* body */
  --ink-4: #64748B;            /* muted body / captions */
  --ink-5: #94A3B8;            /* subtle / disabled */

  --mute-1: #FFFFFF;           /* primary text on dark */
  --mute-2: #CBD5E1;           /* secondary text */
  --mute-3: #94A3B8;           /* tertiary text */
  --mute-4: #475569;           /* very muted / disabled */
  --mute-5: #1E293B;           /* hairline border on raised surfaces */

  /* ---------- Typography ----------
     Two faces. Inter handles all UI weights via variable axis;
     JetBrains Mono is reserved for numeric data. */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — 8 sizes, no exceptions. Anything else is a bug. */
  --text-display: 56px;        /* marketing hero */
  --text-h1: 36px;             /* page heading */
  --text-h2: 24px;             /* section heading */
  --text-h3: 18px;             /* subsection */
  --text-body: 15px;           /* default body */
  --text-small: 13px;          /* secondary, table cells, captions */
  --text-label: 11px;          /* eyebrow / label, uppercase 0.1em ls, weight 600 */
  --text-data: 13px;           /* mono numeric data */

  /* Line-heights */
  --lh-display: 0.98;
  --lh-heading: 1.15;
  --lh-body: 1.55;
  --lh-tight: 1.25;

  /* Weights — variable Inter; canonical stops we use */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Letter-spacing */
  --ls-display: -0.03em;
  --ls-heading: -0.01em;
  --ls-label: 0.10em;
  --ls-mono-meta: 0.12em;

  /* ---------- Motion ----------
     One easing curve everywhere. Sport-natural out-cubic. */
  --ease-sport: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-hover: 150ms;
  --duration-page: 200ms;
  --duration-hero-loop: 14s;   /* hero ball traversal of xPts curve */

  /* ---------- Surfaces & components ---------- */
  --radius-card: 10px;
  --radius-button: 9px;
  --radius-pill: 999px;
  --border-card: 1px solid var(--mute-5);

  /* Shadows — used sparingly. */
  --shadow-marketing: 0 20px 60px rgba(0, 0, 0, 0.6);
  --shadow-cta: 0 6px 22px rgba(18, 230, 101, 0.40);

  /* ---------- Spacing — 8px grid ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;             /* marketing section min vertical padding */
  --space-10: 96px;
}

/* ============================================================
 * Banned values — left as documentation, not as overrides.
 *
 *   ❌ Any size below 11px (no 9px, 10px).
 *   ❌ Any size between 11px and 13px other than --text-small.
 *     Removes the 0.55rem / 0.58rem / 0.62rem in legacy templates.
 *   ❌ Status-color button variants (.btn-success, .btn-danger, ...).
 *     Color is owned by content, not by button kind.
 *   ❌ Glassmorphism on dashboard cards, list rows, navigation,
 *     or any high-frequency surface. Reserved for ~2% of surfaces.
 *   ❌ Purple→teal, pink→violet, blue→cyan gradients.
 *     Aurora glow backdrops. Rotating cube/hex backdrops.
 *
 * If a future contributor needs an exception, add the token here
 * with a justification comment — do not bypass.
 * ============================================================ */