/* Storm Developments - primitive design tokens
 *
 * Raw scale values: every color, every spacing step, every type size
 * the system can produce. This file is the dictionary;
 * _tokens-semantic.css is the grammar.
 *
 * Components must not reference these tokens directly. Consume the
 * semantic alias in _tokens-semantic.css instead. If you reach for
 * --color-blue-500 in a component, the semantic vocabulary is missing
 * a token: add it to _tokens-semantic.css.
 *
 * See ADR core/006 for the full design-system grammar.
 *
 * Imported by _ts/core/dashboard.css; loads via @core/dashboardStyles
 * inside any Svelte island that touches the dashboard surface.
 */

:root {

  /* ---- Color: neutral scale (cool blue-grey, near-black backgrounds) ----
   *
   * Subtle cool-blue tint on the deep end (5° hue shift toward 220°). Reads
   * as modern dark-UI (Linear, Vercel, Datadog territory) rather than the
   * flat "default-black" that pure-neutral greys produce in dashboards.
   * The light end stays pure neutral so text contrast and chart colors
   * aren't affected.
   */
  --color-ink-50:  #f3f4f6;
  --color-ink-100: #e5e7eb;
  --color-ink-200: #d1d5db;
  --color-ink-300: #9ca3af;
  --color-ink-400: #6b7280;
  --color-ink-500: #4b5563;
  --color-ink-600: #374151;
  --color-ink-650: #2d3748;  /* storm.css slate mid-step */
  --color-ink-700: #252834;
  --color-ink-800: #1c1f2a;
  --color-ink-850: #161924;
  --color-ink-900: #12141d;
  --color-ink-925: #0f1119;
  --color-ink-950: #0a0c12;

  /* ---- Color: paper scale (light-theme surface ramp) ----
   *
   * The ink scale runs dark-first: its light end (--color-ink-50..200) is
   * TEXT on a dark surface, not a surface in its own right, and the steps
   * there are too far apart to layer five backgrounds out of. Light mode
   * needs its own tight ramp near white, so it gets one. Paper-0 is the
   * raised card (white); paper-50 is the page; paper-100/200 sit under it
   * and carry the borders. Same 5° cool tint as the ink scale so the two
   * themes read as one product.
   */
  --color-paper-0:   #ffffff;
  --color-paper-50:  #f6f7f9;
  --color-paper-100: #eef0f4;
  --color-paper-200: #e2e5ec;
  --color-paper-300: #d3d8e1;

  /* ---- Color: carbon scale (pure-neutral marketing blacks) ----
   *
   * The public marketing surface (static/css/storm.css, ADR core/012)
   * layers pure-neutral blacks, not the cool-tinted ink ramp. Values are
   * the exact pre-tokenization hex; convergence onto the ink ramp is a
   * later-unit design decision, not a rename.
   */
  --color-carbon-50:  #e5e5e5;
  --color-carbon-100: #e0e0e0;
  --color-carbon-750: #333333;
  --color-carbon-775: #2a2a2a;
  --color-carbon-800: #252525;
  --color-carbon-820: #222222;
  --color-carbon-825: #1f1f1f;
  --color-carbon-840: #1c1c1f;  /* the Spellbook theme page ground */
  --color-carbon-850: #1a1a1a;
  --color-carbon-875: #141414;
  --color-carbon-900: #111111;
  --color-carbon-925: #0f0f0f;
  --color-carbon-930: #0e0e0e;
  --color-carbon-940: #0d0d0d;
  --color-carbon-950: #0a0a0a;
  --color-carbon-975: #050505;
  --color-black:      #000000;

  /* ---- Color: navy (Storm-navy console/CTA surfaces; authored to stay
     navy in BOTH themes: branded chrome, not a themed surface) ---- */
  --color-navy-850: #121821;
  --color-navy-900: #11243a;
  --color-navy-950: #0a1929;

  /* ---- Color: sage scale (editorial text ramp, the Dispatch) ---- */
  --color-sage-100: #ecefed;
  --color-sage-200: #c8d1cd;
  --color-sage-400: #9aa3a0;
  --color-sage-500: #6b7772;
  --color-sage-600: #4b5550;
  --color-sage-700: #4d5651;
  --color-sage-800: #3a423e;
  --color-sage-900: #252b28;



  /* ---- Color: editorial accents (Dispatch identity hues) ---- */
  --color-teal-200:   #5ed4a8;
  --color-teal-300:   #5dcaa5;
  --color-teal-500:   #1d9e75;
  --color-teal-600:   #16825d;
  --color-teal-700:   #14724f;
  --color-gold-300:   #f0c662;
  --color-gold-400:   #d4a437;
  --color-gold-600:   #a17c1f;
  --color-gold-700:   #85661a;
  --color-indigo-400: #7b8fdb;
  --color-indigo-600: #4f46e5;
  --color-red-450:    #e5484d;

  /* ---- Color: accent (Storm blue) ---- */
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #1e90ff;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;

  /* ---- Color: brand electric (Storm cyan, public-surface identity).
     700/800 are the light-theme depths: the vivid cyan fails contrast
     on paper, so light walks deeper, same move as accent. ---- */
  --color-cyan-200: #7ee7ff;
  --color-cyan-400: #00d4ff;
  --color-cyan-700: #0e7490;
  --color-cyan-800: #155e75;



  /* ---- Color: status (separate hues, not accent variants) ---- */
  --color-green-400: #6eb88f;
  --color-red-400:   #e57373;
  --color-amber-400: #fbbf24;
  --color-violet-400: #c084fc;

  /* ---- Color: public marketing hues (storm.css, ADR core/012) ----
   *
   * Status and identity hues the marketing surface uses at exact values
   * that differ from the dashboard status family above. Convergence
   * candidates for the light-authoring unit.
   */
  --color-green-200: #8aff8a;
  --color-green-300: #6bcf6b;
  --color-green-450: #22c55e;
  --color-green-500: #10b981;
  --color-red-250:   #ff7a7e;
  --color-red-300:   #ff6b6b;
  --color-red-500:   #ef4444;
  --color-amber-300: #fcd34d;
  --color-amber-450: #f5a623;
  --color-amber-500: #f59e0b;
  --color-khaki-200: #d9d4b3;
  --color-khaki-300: #c4bd93;
  --color-khaki-700: #6b6242;
  --color-khaki-800: #554e35;
  --color-rose-100:  #f0e4e1;
  --color-rose-700:  #82655c;

  /* ---- Color: status, light-theme variants ----
   *
   * The 400-weight status hues are calibrated to carry on a near-black
   * surface; on white they are pale enough to fail contrast at body size.
   * These are the same hues walked deeper, used only by the light block
   * in _tokens-semantic.css.
   */
  --color-green-700:  #2f7d55;
  --color-green-750:  #286c4b;  /* clears AA on paper-100 (public status) */
  --color-red-700:    #c0392f;
  --color-amber-700:  #b45309;
  --color-violet-700: #7c3aed;

  /* ---- Color: alpha overlays (interactive states) ----
   *
   * Naming rules, stated once:
   * - A bare-hue alpha name aliases the family's canonical base:
   *   blue = 500, cyan = 400, red = 400, green = 400, amber = 400,
   *   white/black = the obvious. Other bases carry their step in the
   *   name (--color-green-500-alpha-50, --color-gold-400-alpha-06).
   * - An alpha family may exist without a solid base primitive: the
   *   alpha IS the value the surface uses (mist, red-550).
   * - "2p5"/"1p5" suffixes carry fractional percents (0.025 / 0.015).
   */

  --color-blue-alpha-02:     rgba(30, 144, 255, 0.02);
  --color-blue-alpha-03:     rgba(30, 144, 255, 0.03);
  --color-blue-alpha-04:     rgba(30, 144, 255, 0.04);
  --color-blue-alpha-05:     rgba(30, 144, 255, 0.05);
  --color-blue-alpha-06:     rgba(30, 144, 255, 0.06);
  --color-blue-alpha-07:     rgba(30, 144, 255, 0.07);
  --color-blue-alpha-08:     rgba(30, 144, 255, 0.08);
  --color-blue-alpha-10:     rgba(30, 144, 255, 0.10);
  --color-blue-alpha-12:     rgba(30, 144, 255, 0.12);
  --color-blue-alpha-15:     rgba(30, 144, 255, 0.15);
  --color-blue-alpha-18:     rgba(30, 144, 255, 0.18);
  --color-blue-alpha-20:     rgba(30, 144, 255, 0.20);
  --color-blue-alpha-22:     rgba(30, 144, 255, 0.22);
  --color-blue-alpha-25:     rgba(30, 144, 255, 0.25);
  --color-blue-alpha-30:     rgba(30, 144, 255, 0.30);
  --color-blue-alpha-35:     rgba(30, 144, 255, 0.35);
  --color-blue-alpha-40:     rgba(30, 144, 255, 0.40);
  --color-blue-alpha-45:     rgba(30, 144, 255, 0.45);
  --color-blue-alpha-50:     rgba(30, 144, 255, 0.50);
  --color-blue-alpha-55:     rgba(30, 144, 255, 0.55);
  --color-blue-alpha-80:     rgba(30, 144, 255, 0.80);
  --color-cyan-alpha-03:     rgba(0, 212, 255, 0.03);
  --color-cyan-alpha-04:     rgba(0, 212, 255, 0.04);
  --color-cyan-alpha-05:     rgba(0, 212, 255, 0.05);
  --color-cyan-alpha-06:     rgba(0, 212, 255, 0.06);
  --color-cyan-alpha-07:     rgba(0, 212, 255, 0.07);
  --color-cyan-alpha-08:     rgba(0, 212, 255, 0.08);
  --color-cyan-alpha-09:     rgba(0, 212, 255, 0.09);
  --color-cyan-alpha-10:     rgba(0, 212, 255, 0.10);
  --color-cyan-alpha-12:     rgba(0, 212, 255, 0.12);
  --color-cyan-alpha-14:     rgba(0, 212, 255, 0.14);
  --color-cyan-alpha-15:     rgba(0, 212, 255, 0.15);
  --color-cyan-alpha-28:     rgba(0, 212, 255, 0.28);
  --color-cyan-alpha-30:     rgba(0, 212, 255, 0.30);
  --color-cyan-alpha-35:     rgba(0, 212, 255, 0.35);
  --color-cyan-alpha-40:     rgba(0, 212, 255, 0.40);
  --color-cyan-alpha-45:     rgba(0, 212, 255, 0.45);
  --color-cyan-alpha-50:     rgba(0, 212, 255, 0.50);
  --color-cyan-alpha-55:     rgba(0, 212, 255, 0.55);
  --color-cyan-alpha-60:     rgba(0, 212, 255, 0.60);
  --color-cyan-alpha-65:     rgba(0, 212, 255, 0.65);
  --color-teal-500-alpha-07: rgba(29, 158, 117, 0.07);
  --color-teal-500-alpha-16: rgba(29, 158, 117, 0.16);
  --color-teal-500-alpha-18: rgba(29, 158, 117, 0.18);
  --color-teal-500-alpha-55: rgba(29, 158, 117, 0.55);
  --color-teal-400-alpha-2p5: rgba(45, 184, 137, 0.025);
  --color-teal-400-alpha-03: rgba(45, 184, 137, 0.03);
  --color-teal-400-alpha-04: rgba(45, 184, 137, 0.04);
  --color-teal-400-alpha-05: rgba(45, 184, 137, 0.05);
  --color-teal-400-alpha-06: rgba(45, 184, 137, 0.06);
  --color-teal-400-alpha-07: rgba(45, 184, 137, 0.07);
  --color-teal-400-alpha-08: rgba(45, 184, 137, 0.08);
  --color-teal-400-alpha-18: rgba(45, 184, 137, 0.18);
  --color-teal-400-alpha-40: rgba(45, 184, 137, 0.40);
  --color-teal-300-alpha-04: rgba(93, 202, 165, 0.04);
  --color-teal-300-alpha-06: rgba(93, 202, 165, 0.06);
  --color-teal-300-alpha-40: rgba(93, 202, 165, 0.40);
  --color-teal-300-alpha-70: rgba(93, 202, 165, 0.70);
  --color-teal-300-alpha-75: rgba(93, 202, 165, 0.75);
  --color-green-alpha-08:    rgba(110, 184, 143, 0.08);
  --color-green-alpha-15:    rgba(110, 184, 143, 0.15);
  --color-green-350-alpha-04: rgba(80, 200, 80, 0.04);
  --color-green-350-alpha-10: rgba(80, 200, 80, 0.10);
  --color-green-350-alpha-25: rgba(80, 200, 80, 0.25);
  --color-green-350-alpha-40: rgba(80, 200, 80, 0.40);
  --color-green-500-alpha-50: rgba(16, 185, 129, 0.50);
  --color-red-alpha-06:      rgba(229, 115, 115, 0.06);
  --color-red-alpha-12:      rgba(229, 115, 115, 0.12);
  --color-red-alpha-30:      rgba(229, 115, 115, 0.30);
  --color-red-350-alpha-10:  rgba(255, 80, 80, 0.10);
  --color-red-350-alpha-20:  rgba(255, 80, 80, 0.20);
  --color-red-350-alpha-40:  rgba(255, 80, 80, 0.40);
  --color-red-450-alpha-06:  rgba(229, 72, 77, 0.06);
  --color-red-450-alpha-16:  rgba(229, 72, 77, 0.16);
  --color-red-450-alpha-18:  rgba(229, 72, 77, 0.18);
  --color-red-450-alpha-30:  rgba(229, 72, 77, 0.30);
  --color-red-500-alpha-50:  rgba(239, 68, 68, 0.50);
  --color-red-550-alpha-90:  rgba(229, 57, 53, 0.90);
  --color-amber-alpha-08:    rgba(251, 191, 36, 0.08);
  --color-amber-alpha-15:    rgba(251, 191, 36, 0.15);
  --color-amber-300-alpha-05: rgba(252, 211, 77, 0.05);
  --color-amber-450-alpha-06: rgba(245, 166, 35, 0.06);
  --color-amber-450-alpha-50: rgba(245, 166, 35, 0.50);
  --color-amber-500-alpha-50: rgba(245, 158, 11, 0.50);
  --color-gold-400-alpha-2p5: rgba(212, 164, 55, 0.025);
  --color-gold-400-alpha-04: rgba(212, 164, 55, 0.04);
  --color-gold-400-alpha-06: rgba(212, 164, 55, 0.06);
  --color-gold-400-alpha-07: rgba(212, 164, 55, 0.07);
  --color-gold-400-alpha-08: rgba(212, 164, 55, 0.08);
  --color-gold-400-alpha-12: rgba(212, 164, 55, 0.12);
  --color-gold-400-alpha-14: rgba(212, 164, 55, 0.14);
  --color-gold-400-alpha-16: rgba(212, 164, 55, 0.16);
  --color-gold-400-alpha-18: rgba(212, 164, 55, 0.18);
  --color-gold-400-alpha-40: rgba(212, 164, 55, 0.40);
  --color-gold-400-alpha-50: rgba(212, 164, 55, 0.50);
  --color-gold-400-alpha-60: rgba(212, 164, 55, 0.60);
  --color-indigo-alpha-06:   rgba(123, 143, 219, 0.06);
  --color-indigo-alpha-16:   rgba(123, 143, 219, 0.16);
  --color-indigo-alpha-18:   rgba(123, 143, 219, 0.18);
  --color-mist-alpha-05:     rgba(124, 142, 143, 0.05);
  --color-mist-alpha-20:     rgba(124, 142, 143, 0.20);
  --color-white-alpha-1p5:   rgba(255, 255, 255, 0.015);
  --color-white-alpha-03:    rgba(255, 255, 255, 0.03);
  --color-white-alpha-04:    rgba(255, 255, 255, 0.04);
  --color-white-alpha-05:    rgba(255, 255, 255, 0.05);
  --color-white-alpha-06:    rgba(255, 255, 255, 0.06);
  --color-white-alpha-08:    rgba(255, 255, 255, 0.08);
  --color-white-alpha-10:    rgba(255, 255, 255, 0.10);
  --color-white-alpha-12:    rgba(255, 255, 255, 0.12);
  --color-white-alpha-18:    rgba(255, 255, 255, 0.18);
  --color-white-alpha-20:    rgba(255, 255, 255, 0.20);
  --color-white-alpha-40:    rgba(255, 255, 255, 0.40);
  --color-white-alpha-60:    rgba(255, 255, 255, 0.60);
  --color-white-alpha-70:    rgba(255, 255, 255, 0.70);
  --color-white-alpha-80:    rgba(255, 255, 255, 0.80);
  --color-white-alpha-90:    rgba(255, 255, 255, 0.90);
  --color-white-alpha-95:    rgba(255, 255, 255, 0.95);
  --color-white-alpha-98:    rgba(255, 255, 255, 0.98);
  --color-black-alpha-1p5:   rgba(0, 0, 0, 0.015);
  --color-black-alpha-03:    rgba(0, 0, 0, 0.03);
  --color-black-alpha-04:    rgba(0, 0, 0, 0.04);
  --color-black-alpha-05:    rgba(0, 0, 0, 0.05);
  --color-black-alpha-06:    rgba(0, 0, 0, 0.06);
  --color-black-alpha-08:    rgba(0, 0, 0, 0.08);
  --color-black-alpha-10:    rgba(0, 0, 0, 0.10);
  --color-black-alpha-12:    rgba(0, 0, 0, 0.12);
  --color-black-alpha-18:    rgba(0, 0, 0, 0.18);
  --color-black-alpha-20:    rgba(0, 0, 0, 0.20);
  --color-black-alpha-25:    rgba(0, 0, 0, 0.25);
  --color-black-alpha-30:    rgba(0, 0, 0, 0.30);
  --color-black-alpha-35:    rgba(0, 0, 0, 0.35);
  --color-black-alpha-40:    rgba(0, 0, 0, 0.40);
  --color-black-alpha-45:    rgba(0, 0, 0, 0.45);
  --color-black-alpha-50:    rgba(0, 0, 0, 0.50);
  --color-black-alpha-60:    rgba(0, 0, 0, 0.60);
  --color-carbon-850-alpha-60: rgba(26, 26, 26, 0.60);
  --color-carbon-850-alpha-80: rgba(26, 26, 26, 0.80);
  --color-carbon-875-alpha-40: rgba(20, 20, 20, 0.40);
  --color-carbon-925-alpha-95: rgba(15, 15, 15, 0.95);
  --color-carbon-925-alpha-98: rgba(15, 15, 15, 0.98);
  --color-carbon-975-alpha-80: rgba(5, 5, 5, 0.80);
  --color-carbon-975-alpha-90: rgba(5, 5, 5, 0.90);
  --color-carbon-975-alpha-95: rgba(5, 5, 5, 0.95);
  --color-ink-600-alpha-20:  rgba(55, 65, 81, 0.20);
  --color-ink-600-alpha-30:  rgba(55, 65, 81, 0.30);
  --color-ink-600-alpha-50:  rgba(55, 65, 81, 0.50);

  /* ---- Spacing: 8px base scale (content surfaces) ---- */
  --space-1: 0.5rem;   /*  8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 3rem;     /* 48px */
  --space-6: 4rem;     /* 64px */

  /* ---- Spacing: 4px dense scale (repeating rows) ---- */
  --space-dense-1: 0.25rem;  /*  4px */
  --space-dense-2: 0.5rem;   /*  8px */
  --space-dense-3: 0.75rem;  /* 12px */
  --space-dense-4: 1rem;     /* 16px */

  /* ---- Type: size scale (used inside the role bundles) ---- */
  --text-size-12: 0.75rem;
  --text-size-13: 0.8125rem;
  --text-size-14: 0.875rem;
  --text-size-16: 1rem;
  --text-size-18: 1.125rem;
  --text-size-22: 1.375rem;
  --text-size-28: 1.75rem;

  --text-leading-tight:  1.2;
  --text-leading-snug:   1.3;
  --text-leading-normal: 1.45;
  --text-leading-relaxed: 1.5;

  --text-weight-regular: 400;
  --text-weight-medium:  500;
  --text-weight-semi:    600;
  --text-weight-bold:    700;

  /* ---- Radius ---- */
  --radius-1: 3px;
  --radius-2: 6px;
  --radius-3: 8px;
  --radius-4: 12px;
  --radius-pill: 999px;

  /* ---- Elevation (shadow scale) ---- */
  --elevation-1: 0 1px 2px var(--color-black-alpha-30);
  --elevation-2: 0 4px 14px -8px var(--color-black-alpha-50);
  --elevation-3: 0 8px 24px var(--color-black-alpha-50);

  /* Light-theme elevation. A shadow tuned for a near-black page reads as a
     smudge on white: the dark scale leans on 30-50% black, which on paper
     is a bruise rather than a lift. These are the same three steps at the
     opacity white can carry. */
  --elevation-light-1: 0 1px 2px rgba(16, 24, 40, 0.06);
  --elevation-light-2: 0 4px 14px -8px rgba(16, 24, 40, 0.18);
  --elevation-light-3: 0 8px 24px rgba(16, 24, 40, 0.16);

  /* ---- Motion ---- */
  --duration-quick: 180ms;
  --duration-slow:  240ms;
  --easing-out:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --easing-in-out:  cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Font families ---- */
  --font-family-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Berkeley Mono', 'Consolas', 'Monaco', monospace;
}