/* ============================================================
   JOULE — Design Tokens
   Instrument-panel aesthetic: near-black surfaces, phosphor-
   signal-green accent, tabular mono numerals.
   ============================================================ */

:root {
  /* ---- Brand: "Signal" green (phosphor / fintech-go) — 11 shades ---- */
  --signal-50:  #e7fbf0;
  --signal-100: #c4f5db;
  --signal-200: #92ecbe;
  --signal-300: #5be49b;  /* dark-mode accent / glow */
  --signal-400: #2dd483;
  --signal-500: #14bd6e;  /* primary on light */
  --signal-600: #0c9e5a;
  --signal-700: #0b7e48;
  --signal-800: #0d6440;
  --signal-900: #0c5135;
  --signal-950: #042c1c;

  /* ---- Ink: cool graphite with faint green undertone — surfaces ---- */
  --ink-950: #08090b;  /* page background */
  --ink-900: #0b0d10;
  --ink-850: #0f1216;
  --ink-800: #14181d;  /* card */
  --ink-750: #191e24;
  --ink-700: #20262e;  /* elevated / hover */
  --ink-600: #2a313a;  /* hairline-strong */
  --ink-550: #353d47;
  --ink-500: #475059;

  /* ---- Text ---- */
  --text-hi:  #f3f6f4;
  --text-mid: #a6adac;
  --text-lo:  #6c7472;
  --text-dim: #4d5452;

  /* ---- Semantic data colors (distinct from brand for clarity) ---- */
  --ok:     #3ee08a;   /* under budget / healthy */
  --ok-dim: #0e9c5a;
  --warn:   #f5b13d;   /* approaching budget */
  --warn-dim:#9c7320;
  --danger: #ff5d54;   /* over budget / runaway loop */
  --danger-dim:#a13029;
  --info:   #62a0ff;   /* routing / informational */
  --info-dim: #2f5db5;

  /* ---- Functional tokens (dark mode is default) ---- */
  --bg:            var(--ink-950);
  --bg-grid:       rgba(91, 228, 155, 0.035);
  --surface:       var(--ink-850);
  --surface-2:     var(--ink-800);
  --surface-3:     var(--ink-750);
  --elevated:      var(--ink-700);
  --border:        rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.12);
  --accent:        var(--signal-300);
  --accent-press:  var(--signal-400);
  --accent-ink:    #04130c;          /* text on accent fills */
  --focus:         var(--signal-300);

  /* ---- Type ---- */
  --font-display: 'Cabinet Grotesk', 'Satoshi', system-ui, sans-serif;
  --font-body:    'Satoshi', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* fluid type scale */
  --t-mono-xs: 0.72rem;
  --t-xs:   0.78rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-lg:   1.18rem;
  --t-xl:   1.5rem;
  --t-2xl:  clamp(1.7rem, 1.2rem + 2vw, 2.4rem);
  --t-3xl:  clamp(2.2rem, 1.3rem + 4vw, 3.6rem);
  --t-4xl:  clamp(2.8rem, 1.2rem + 6.5vw, 5.4rem);

  /* spacing / radius / motion */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 8px 30px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 0 1px rgba(91,228,155,0.18), 0 0 40px -12px rgba(91,228,155,0.45);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --maxw: 1200px;
}

/* Light theme (used on /brand showcase swatches via [data-theme=light]) */
[data-theme="light"] {
  --bg:        #faf9f5;
  --surface:   #ffffff;
  --surface-2: #f4f3ee;
  --surface-3: #ecebe4;
  --elevated:  #ffffff;
  --border:    rgba(8,9,11,0.10);
  --border-strong: rgba(8,9,11,0.16);
  --text-hi:  #0d1014;
  --text-mid: #4b5350;
  --text-lo:  #717977;
  --text-dim: #9aa09e;
  --accent:   var(--signal-600);
  --accent-ink: #ffffff;
  --bg-grid:  rgba(12,158,90,0.05);
}