/* ============================================================
   Design tokens — pulled from Figma variables via MCP.
   Populated slide-by-slide during Phase B.
   Keep this file the single source of truth for brand values.
   ============================================================ */

:root {
  /* --- Base (Figma: base/white) --- */
  --color-white: #ffffff;

  /* --- Neutral scale (Figma: neutral/*) --- */
  --color-neutral-100: #f3f1f8;  /* light surface / slide bg */
  --color-neutral-200: #e7e3f2;
  --color-neutral-300: #cbc6da;  /* dividers, hairlines */
  --color-neutral-400: #a5a0b5;
  --color-neutral-500: #747084;
  --color-neutral-600: #575171;
  --color-neutral-700: #3e385f;
  --color-neutral-800: #29234c;
  --color-neutral-900: #1a153f;

  /* --- Text (Figma: text/*) --- */
  --color-text-primary:   #1a153f;
  --color-text-secondary: #575171;
  --color-text-muted:     #a5a0b5;
  --color-text-on-brand:  #ffffff;

  /* --- Brand scales — each ramps 900 (darkest) → 100 (lightest).
         The /500 step is the "named" brand color. --- */

  /* Prism (violet) */
  --color-prism-900: #130565;
  --color-prism-800: #1c097a;
  --color-prism-700: #2a0f98;
  --color-prism-600: #3916b6;
  --color-prism-500: #4b1fd4;
  --color-prism-400: #7952e5;
  --color-prism-300: #9a76f2;
  --color-prism-200: #c0a5fa;
  --color-prism-100: #e0d1fc;

  /* Refract (blue) */
  --color-refract-900: #04187a;
  --color-refract-800: #082493;
  --color-refract-700: #0d34b7;
  --color-refract-600: #1346db;
  --color-refract-500: #1a5cff;
  --color-refract-400: #5389ff;
  --color-refract-300: #75a5ff;
  --color-refract-200: #a3c5ff;
  --color-refract-100: #d1e3ff;

  /* Clarity (teal) */
  --color-clarity-900: #003b50;
  --color-clarity-800: #005161;
  --color-clarity-700: #006f78;
  --color-clarity-600: #00908e;
  --color-clarity-500: #00a896;
  --color-clarity-400: #32caac;
  --color-clarity-300: #5be4bd;
  --color-clarity-200: #93f6d0;
  --color-clarity-100: #c8fae2;

  /* Signal (green) */
  --color-signal-900: #0b5a49;
  --color-signal-800: #136d50;
  --color-signal-700: #1e885b;
  --color-signal-600: #2ca265;
  --color-signal-500: #3dbd6e;
  --color-signal-400: #69d789;
  --color-signal-300: #8beb9d;
  --color-signal-200: #b5f8ba;
  --color-signal-100: #dafbd9;

  /* Lumen (yellow) */
  --color-lumen-900: #755204;
  --color-lumen-800: #8e6707;
  --color-lumen-700: #b0850c;
  --color-lumen-600: #d2a411;
  --color-lumen-500: #f5c518;
  --color-lumen-400: #f9d850;
  --color-lumen-300: #fce473;
  --color-lumen-200: #fef0a2;
  --color-lumen-100: #fef8d0;

  /* Flux (orange) */
  --color-flux-900: #731b08;
  --color-flux-800: #8b2b0d;
  --color-flux-700: #ac4215;
  --color-flux-600: #ce5d1e;
  --color-flux-500: #f07c2a;
  --color-flux-400: #f6a55d;
  --color-flux-300: #fac07e;
  --color-flux-200: #fddaa9;
  --color-flux-100: #feefd4;

  /* Radiant (red) */
  --color-radiant-900: #6f0a36;
  --color-radiant-800: #86113a;
  --color-radiant-700: #a71c3f;
  --color-radiant-600: #c72842;
  --color-radiant-500: #e83845;
  --color-radiant-400: #f16a67;
  --color-radiant-300: #f89387;
  --color-radiant-200: #fcbfb0;
  --color-radiant-100: #fde2d7;

  /* --- Role aliases — earlier slides reference these; they resolve
         to each scale's /500 step. Kept so existing styles don't break. --- */
  --color-brand-prism:      var(--color-prism-500);
  --color-brand-refract:    var(--color-refract-500);
  --color-brand-clarity:    var(--color-clarity-500);
  --color-spectrum-signal:  var(--color-signal-500);
  --color-spectrum-lumen:   var(--color-lumen-500);
  --color-spectrum-flux:    var(--color-flux-500);
  --color-spectrum-radiant: var(--color-radiant-500);

  /* --- Gradients --- */
  --gradient-brand-cover:
    linear-gradient(113.27deg,
      var(--color-brand-prism)   0%,
      var(--color-brand-refract) 50%,
      var(--color-brand-clarity) 100%);

  /* 7-stop Spectrum rainbow (used for the "Spectrum" word on Slide 09,
     the Slide-11 gradient strip, and anywhere the full spectrum is needed). */
  --gradient-spectrum:
    linear-gradient(90deg,
      var(--color-prism-500)   0%,
      var(--color-refract-500) 14.549%,
      var(--color-clarity-500) 29.586%,
      var(--color-signal-500)  43.891%,
      var(--color-lumen-500)   56.731%,
      var(--color-flux-500)    72.014%,
      var(--color-radiant-500) 86.725%);

  /* --- Radii --- */
  --radius-slide-panel: 40px;

  /* --- Slide layout --- */
  --slide-inset: 16px;
}