/* ============================================================================
   FORGE DESIGN TOKENS -- single source of truth
   ----------------------------------------------------------------------------
   Every page (marketing, console, inner pages, generated client sites) loads
   this FIRST. styles.css, ecosystem.css, inner-pages.css, and console.html
   inline blocks all *consume* these tokens. They no longer redefine them.

   Adding a new color, font, radius, or spacing rule? Add it here. Anywhere
   else is drift, and drift is what made the brand feel fragmented.
   ============================================================================ */

:root {
  /* === COLOR / SURFACE ====================================================== */
  --bg:           #050508;            /* page background */
  --surface:      #0c0c12;            /* primary card */
  --surface-2:    #141420;            /* nested card / table row */
  --surface-3:    #08080d;            /* bottom of vertical-gradient cards */
  --border:       rgba(255,255,255,0.06);
  --border-soft:  rgba(255,255,255,0.04);
  --border-hard:  rgba(255,255,255,0.10);
  --shadow-card:  0 24px 60px rgba(0,0,0,0.45);

  /* === TEXT ================================================================ */
  --text:         #ece9e2;            /* primary copy + headlines */
  --text-soft:    #b8b5ac;            /* secondary copy */
  --text-dim:     #8a8780;            /* tertiary / labels  (single canonical value) */
  --text-faint:   #6a6960;            /* timestamps / captions */
  --text-ghost:   #3a3a40;            /* watermarks / outer brand line */

  /* === BRAND ACCENT (Forge lime) ========================================== */
  --accent:        #c4f43b;
  --accent-dark:   #b5e332;
  --accent-light:  #d9ff7a;
  --accent-glow:   rgba(196,244,59,0.12);
  --accent-soft:   rgba(196,244,59,0.06);
  --accent-line:   rgba(196,244,59,0.18);

  /* === PRODUCT ACCENT EXTENSIONS (used by ecosystem cards / icons) ========= */
  --ember:        #ff6b4a;  --ember-glow:  rgba(255,107,74,0.12);
  --blue:         #4a9eff;  --blue-glow:   rgba(74,158,255,0.12);
  --purple:       #a855f7;  --purple-glow: rgba(168,85,247,0.12);
  --cyan:         #22d3ee;  --cyan-glow:   rgba(34,211,238,0.12);
  --gold:         #f59e0b;  --gold-glow:   rgba(245,158,11,0.12);
  /* Shield = canonical accent. Aliases kept so legacy selectors still resolve. */
  --shield:       var(--accent);
  --shield-glow:  rgba(196,244,59,0.10);

  /* === STATUS COLORS ====================================================== */
  --success:  #4ade80;  --success-soft:  rgba(74,222,128,0.10);
  --warning:  #fbbf24;  --warning-soft:  rgba(251,191,36,0.10);
  --danger:   #f87171;  --danger-soft:   rgba(248,113,113,0.10);
  --info:     #60a5fa;  --info-soft:     rgba(96,165,250,0.10);

  /* === TYPOGRAPHY STACKS ================================================== */
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:  'JetBrains Mono', 'SF Mono', 'Courier New', monospace;

  /* Type scale (clamp() for responsive headlines) */
  --fs-display:   clamp(2.6rem, 5.4vw, 4.8rem);
  --fs-h1:        clamp(2rem, 3.6vw, 3rem);
  --fs-h2:        clamp(1.5rem, 2.6vw, 2rem);
  --fs-h3:        1.3rem;
  --fs-body:      1rem;
  --fs-body-sm:   0.92rem;
  --fs-caption:   0.78rem;
  --fs-mono-sm:   0.72rem;
  --fs-mono-xs:   0.66rem;

  --lh-tight:     1.1;
  --lh-snug:      1.3;
  --lh-body:      1.6;
  --lh-loose:     1.75;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-mono:    0.14em;
  --tracking-mono-lg: 0.18em;

  /* === SPACING SCALE ====================================================== */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32: 128px;

  /* === RADIUS ============================================================== */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-2xl:  28px;
  --r-pill: 100px;          /* canonical pill button radius */

  /* === MOTION ============================================================== */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast:  0.18s;
  --dur:       0.32s;
  --dur-slow:  0.6s;

  /* === BUTTON CANONICAL STYLE (CTA pill) =================================== */
  /* Apply by combining these tokens. Buttons that hand-roll their own values
     should be migrated. */
  --btn-padding:        16px 38px;
  --btn-radius:         var(--r-pill);
  --btn-font:           var(--mono);
  --btn-fs:             0.78rem;
  --btn-tracking:       var(--tracking-mono-lg);
  --btn-weight:         600;
  --btn-bg-primary:     var(--accent);
  --btn-fg-primary:     var(--bg);
  --btn-bg-ghost:       transparent;
  --btn-fg-ghost:       var(--text);
  --btn-border-ghost:   1px solid var(--border-hard);
}