/* =========================================================================
   Invictus 2.0 — Design Tokens
   Robinhood Legend-inspired · Dark + Light · Roboto Condensed
   Mirror of the Figma "Theme / Primitives / Spacing / Radius" variables
   in the Invictus2.0 file (🎨 Design System page).
   ========================================================================= */

/* ---------- PRIMITIVES (raw, theme-agnostic) ---------- */
:root {
  --c-black:        #000000;
  --c-gray-base-cool: #05080A; /* cool blue-black canvas base (Legend glow) */
  --c-gray-950:     #0A0B0D;
  --c-gray-900:     #121417;
  --c-gray-850:     #16181C;
  --c-gray-800:     #1E2127;
  --c-gray-700:     #2A2E37;
  --c-gray-600:     #3A3F4B;
  --c-gray-500:     #5C6370;
  --c-gray-400:     #8B919E;
  --c-gray-300:     #B4B9C2;
  --c-gray-200:     #D6D9DE;
  --c-gray-100:     #EBEDF0;
  --c-gray-50:      #F5F6F8;
  --c-white:        #FFFFFF;

  /* Canvas Glow — teal family around #1C4B58 */
  --c-glow-core:    #2E7185;
  --c-glow-mid:     #1C4B58;
  --c-glow-deep:    #102C34;

  --c-green-bright: #00FF80;
  --c-green-mint:   #00F5A0;
  --c-green-600:    #00C805;
  --c-green-700:    #00A344;

  --c-red-500:      #EE433A;
  --c-amber-500:    #D39E44;
  --c-blue-500:     #008DD2;
  --c-purple-500:   #944FAA;
  --c-teal-500:     #00B392;
  --c-orange-500:   #EB732C;
  --c-yellow-500:   #FFB700;

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Roboto Condensed', system-ui, sans-serif;
  --font-body:    'Roboto Condensed', system-ui, sans-serif;

  /* type scale (px) */
  --fs-display-lg: 32px;
  --fs-title-xl:   24px;
  --fs-title-lg:   20px;
  --fs-title-md:   18px;
  --fs-body-lg:    16px;
  --fs-body-md:    14px;
  --fs-body-sm:    13px;
  --fs-label-md:   12px;
  --fs-label-sm:   10px;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- SPACING (4px base) ---------- */
  --space-2:  2px;
  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  /* ---------- RADIUS ---------- */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-pill: 100px;
}

/* ---------- THEME: DARK (default) ---------- */
:root,
[data-theme="dark"] {
  --bg-canvas:          var(--c-gray-950);
  --bg-canvas-base:     var(--c-gray-base-cool);
  --bg-surface:         var(--c-gray-900);
  --bg-surface-raised:  var(--c-gray-850);
  --bg-overlay:         var(--c-gray-800);

  /* Widget surface — translucent so the canvas glow reads through (Legend) */
  --bg-widget-glass:    rgba(255, 255, 255, 0.10);

  /* Canvas Glow stops (used by --bg-canvas-glow below) */
  --glow-core:          var(--c-glow-core);
  --glow-mid:           var(--c-glow-mid);
  --glow-deep:          var(--c-glow-deep);

  /* Layered "light into darkness" background:
     cool base + descending wash + top-center radial halo.
     Apply to the app shell:  background: var(--bg-canvas-glow); */
  --bg-canvas-glow:
    radial-gradient(120% 42% at 50% 4%,
      rgba(46, 113, 133, 0.82) 0%,
      rgba(28, 75, 88, 0.55) 30%,
      rgba(16, 44, 52, 0.22) 62%,
      rgba(5, 8, 10, 0) 100%),
    linear-gradient(180deg,
      rgba(22, 50, 58, 0.48) 0%,
      rgba(12, 26, 31, 0.20) 20%,
      rgba(5, 8, 10, 0) 36%),
    var(--c-gray-base-cool);

  --border-hairline:    rgba(255, 255, 255, 0.10);
  --border-strong:      rgba(255, 255, 255, 0.20);

  --text-primary:       var(--c-white);
  --text-secondary:     rgba(255, 255, 255, 0.70);
  --text-tertiary:      rgba(255, 255, 255, 0.45);
  --text-on-accent:     var(--c-gray-950);

  --accent-brand:       var(--c-green-bright);
  --accent-positive:    var(--c-green-mint);
  --accent-positive-bg: rgba(46, 204, 113, 0.12);
  --accent-negative:    var(--c-red-500);
  --accent-warning:     var(--c-amber-500);
  --accent-info:        var(--c-blue-500);

  /* ---------- BUTTONS ----------
     Figma "Button" set (node 865:343). Primary = solid white / dark-teal text;
     Secondary = white outline; Tertiary = bare text; Destructive = red filled
     and red outline. All share radius-sm (2px) + Inter Medium. */
  --btn-primary-bg:          var(--c-white);
  --btn-primary-bg-hover:    rgba(255, 255, 255, 0.88);
  --btn-primary-text:        #102C34;
  --btn-secondary-border:    var(--c-white);
  --btn-secondary-text:      var(--c-white);
  --btn-secondary-bg-hover:  rgba(255, 255, 255, 0.10);
  --btn-tertiary-text:       var(--c-white);
  --btn-tertiary-bg-hover:   rgba(255, 255, 255, 0.08);
  --btn-destructive-bg:        var(--accent-negative);
  --btn-destructive-bg-hover:  #d83a32;
  --btn-destructive-text:      var(--c-white);
  --btn-destructive-outline:   var(--accent-negative);
  --btn-destructive-outline-bg-hover: rgba(238, 67, 58, 0.12);

  /* Tags / status chips — tuned for legibility on dark glass.
     Bright text + low-alpha tint. Used by delta pills & narrative highlights. */
  --tag-up-text:        #4ade80;
  --tag-up-bg:          rgba(46, 204, 113, 0.14);
  --tag-down-text:      #ff8a80;
  --tag-down-bg:        rgba(255, 107, 97, 0.16);
  --tag-warn-text:      #ffd27d;
  --tag-warn-bg:        rgba(245, 184, 95, 0.16);
  --tag-pos-text:       #6ee7a8;
  --tag-pos-bg:         rgba(46, 204, 113, 0.18);
  --tag-neg-text:       #ff8a80;
  --tag-neg-bg:         rgba(255, 107, 97, 0.18);
}

/* ---------- THEME: LIGHT ---------- */
[data-theme="light"] {
  --bg-canvas:          var(--c-gray-50);
  --bg-canvas-base:     var(--c-gray-50);
  --bg-surface:         var(--c-white);
  --bg-surface-raised:  var(--c-white);
  --bg-overlay:         var(--c-gray-100);

  /* Light theme: widgets read as solid cards; glow is effectively off (flat canvas) */
  --bg-widget-glass:    rgba(255, 255, 255, 0.70);
  --glow-core:          var(--c-gray-50);
  --glow-mid:           var(--c-gray-50);
  --glow-deep:          var(--c-gray-50);
  --bg-canvas-glow:     var(--c-gray-50);

  --border-hairline:    rgba(10, 11, 13, 0.10);
  --border-strong:      rgba(10, 11, 13, 0.16);

  --text-primary:       var(--c-gray-950);
  --text-secondary:     rgba(10, 11, 13, 0.65);
  --text-tertiary:      rgba(10, 11, 13, 0.45);
  --text-on-accent:     var(--c-gray-950);

  --accent-brand:       var(--c-green-700);
  --accent-positive:    var(--c-green-700);
  --accent-positive-bg: rgba(0, 163, 68, 0.12);
  --accent-negative:    var(--c-red-500);
  --accent-warning:     var(--c-amber-500);
  --accent-info:        var(--c-blue-500);

  /* Tags / status chips — darker text for contrast on light surfaces. */
  --tag-up-text:        #1f9d57;
  --tag-up-bg:          rgba(0, 163, 68, 0.12);
  --tag-down-text:      #c0392b;
  --tag-down-bg:        rgba(231, 76, 60, 0.12);
  --tag-warn-text:      #9a6a14;
  --tag-warn-bg:        rgba(245, 184, 95, 0.18);
  --tag-pos-text:       #1f9d57;
  --tag-pos-bg:         rgba(0, 163, 68, 0.12);
  --tag-neg-text:       #c0392b;
  --tag-neg-bg:         rgba(231, 76, 60, 0.12);
}

/* ---------- Optional: follow OS preference when no explicit theme ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg-canvas:          var(--c-gray-50);
    --bg-canvas-base:     var(--c-gray-50);
    --bg-surface:         var(--c-white);
    --bg-surface-raised:  var(--c-white);
    --bg-overlay:         var(--c-gray-100);
    --bg-widget-glass:    rgba(255, 255, 255, 0.70);
    --bg-canvas-glow:     var(--c-gray-50);
    --border-hairline:    rgba(10, 11, 13, 0.10);
    --border-strong:      rgba(10, 11, 13, 0.16);
    --text-primary:       var(--c-gray-950);
    --text-secondary:     rgba(10, 11, 13, 0.65);
    --text-tertiary:      rgba(10, 11, 13, 0.45);
    --accent-brand:       var(--c-green-700);
    --accent-positive:    var(--c-green-700);
    --accent-positive-bg: rgba(0, 163, 68, 0.12);
  }
}