/* ============================================================
   FORGED · Design Tokens v1
   forged-stack.com
   Hybrid system: Cold Forge (product) + Molten Steel (marketing)
   ============================================================ */

:root {
  /* ----- Type ----- */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-sans:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ----- Type scale (1.25 minor third) ----- */
  --fs-xs:    11px;
  --fs-sm:    13px;
  --fs-base:  15px;
  --fs-md:    17px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   44px;
  --fs-4xl:   64px;
  --fs-5xl:   96px;

  /* ----- Spacing (4px base) ----- */
  --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: 96px;

  /* ----- Radii ----- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ----- Motion ----- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ============================================================
   MOLTEN STEEL · Marketing surfaces
   Use on: landing pages, ads, social, sales decks, packaging
   ============================================================ */
[data-theme="molten"], .theme-molten {
  --bg:           #0A0A0A;  /* Carbon — 60% canvas */
  --bg-elev:      #131313;
  --surface:      #1A1A1A;  /* Anvil — 15% surface */
  --border:       #232323;
  --border-soft:  #1d1d1d;

  --text:         #F0EDE7;  /* Bone — 15% type */
  --text-soft:    #9A958C;
  --text-dim:     #5C5852;

  --accent:       #FF4D1C;  /* Ember — 8% CTA */
  --accent-hover: #FF6638;
  --accent-text:  #0A0A0A;  /* sits on Ember */
  --spark:        #FFB347;  /* Heat — 2% secondary */

  --signal-ok:    #6BD968;
  --signal-warn:  #FFB347;
  --signal-bad:   #FF4D1C;

  color-scheme: dark;
}

/* ============================================================
   COLD FORGE · Product surfaces
   Use on: in-app UI, dashboards, docs, authenticated routes
   ============================================================ */
[data-theme="cold"], .theme-cold {
  --bg:           #0C1F23;  /* Deep Teal — 60% canvas */
  --bg-elev:      #102A30;
  --surface:      #163339;  /* Slate Teal — 15% surface */
  --border:       #1F4047;
  --border-soft:  #17343a;

  --text:         #E8F0EE;  /* Mist — 15% type */
  --text-soft:    #8FA5A2;
  --text-dim:     #5A6F6D;

  --accent:       #C5F23A;  /* Voltage — 8% CTA */
  --accent-hover: #D4FA52;
  --accent-text:  #0C1F23;  /* sits on Voltage */
  --spark:        #5EEAD4;  /* Mint — 2% data viz / success */

  --signal-ok:    #5EEAD4;
  --signal-warn:  #FFD166;
  --signal-bad:   #FF6B6B;

  color-scheme: dark;
}

/* ============================================================
   USAGE RULES (encoded in comments — for human reference)
   ------------------------------------------------------------
   60-30-10:
     60% --bg          dominant canvas
     30% --text + --surface
     10% --accent      CTAs and conversion moments ONLY

   NEVER use --accent for:
     - body copy, navigation, headings
     - large background fills
     - more than one element in any single viewport

   ALWAYS use --accent for:
     - the primary CTA on each screen
     - the focused/selected state
     - the "this is the one" moment

   ============================================================ */