/* ============================================================================
   ALF-E — "Violet Sovereign" brand tokens
   Machine-readable export of BRAND.md §1–4. BRAND.md is the source of truth;
   if these disagree, regenerate this file from it.

   :root                 = dark (product default)
   [data-theme="light"]  = light (docs/print; product optional)
   Light selectors are duplicated (:root[data-theme="light"], .theme-light,
   [data-vs][data-theme="light"]) so this drops in regardless of how each app
   toggles theme — wire it to the app's real switch and delete the unused ones.

   Naming: --vs-* is canonical. To roll out, either
     (a) alias the app's existing var:  --ember-surface: var(--vs-panel);
     (b) or paste the raw hex from the value comments.
   See token-mapping.md for the per-app mapping.

   NOTE (Claude Code, 18 Jul): Ember's Tailwind config consumes *-rgb triplets
   via rgb(var(--ember-*-rgb) / <alpha-value>). Aliasing alone will NOT update
   those. See token-mapping.md §A for the required companion triplets.
   ============================================================================ */

:root {
  /* ---- Base -------------------------------------------------------------- */
  --vs-bg:            #0B0A16;
  --vs-bg-2:          #100E22;

  /* ---- Surfaces ---------------------------------------------------------- */
  --vs-panel:         #17142B;
  --vs-panel-2:       #1D1938;
  --vs-inset:         #0A0915;

  /* ---- Borders ----------------------------------------------------------- */
  --vs-line:          #2B2748;
  --vs-line-2:        #39345F;

  /* ---- Text -------------------------------------------------------------- */
  --vs-ink:           #FFFFFF;
  --vs-text:          #C8C3E2;
  --vs-muted:         #8B86AD;

  /* ---- Accent ------------------------------------------------------------ */
  --vs-violet:        #A78BFA;
  --vs-violet-deep:   #7C3AED;
  --vs-headline:      #B39BFF;
  --vs-cyan:          #22D3EE;

  /* ---- Semantic ---------------------------------------------------------- */
  --vs-green:         #34D399;
  --vs-amber:         #FBBF24;
  --vs-red:           #F87171;
  --vs-dormant:       #6B7280;
  --vs-info:          #22D3EE;

  /* ---- Tints (pills / chips / glass) ------------------------------------- */
  --vs-violet-tint:   rgba(167,139,250,.14);
  --vs-green-tint:    rgba(52,211,153,.14);
  --vs-amber-tint:    rgba(251,191,36,.14);
  --vs-red-tint:      rgba(248,113,113,.14);
  --vs-cyan-tint:     rgba(34,211,238,.14);
  --vs-chip-bg:       #FFFFFF0D;
  --vs-chip-line:     #FFFFFF1F;

  /* ---- Gradients --------------------------------------------------------- */
  --vs-grad-brand:        linear-gradient(135deg,#8B5CF6,#6D28D9);
  /* Text-safe variant: both stops clear AA 4.5 against white (5.70 / 7.10).
     Use on any gradient SURFACE carrying normal-size text — e.g. the user
     message bubble. --vs-grad-brand's light stop is only 4.23:1. BRAND.md §5. */
  --vs-grad-brand-text:   linear-gradient(135deg,#7C3AED,#6D28D9);
  --vs-grad-rule:         linear-gradient(90deg,#7C3AED,#22D3EE);
  --vs-grad-dot:          linear-gradient(135deg,#8B5CF6,#22D3EE);
  --vs-grad-asst:         linear-gradient(135deg,#1D1938,#17142B);
  --vs-grad-ember-hero:   linear-gradient(160deg,#221D3F 0%,#141127 55%,#0B0A16 100%);
  --vs-grad-ember-scrim:  linear-gradient(90deg,#0B0A16 8%,transparent 100%);

  /* ---- Glows (decorative; drop in light) --------------------------------- */
  --vs-glow-violet:       radial-gradient(circle,rgba(124,58,237,.20),transparent 65%);
  --vs-glow-cyan:         radial-gradient(circle,rgba(34,211,238,.12),transparent 65%);
  --vs-glow-brand-text:   0 0 26px rgba(167,139,250,.45);

  /* ---- Typography -------------------------------------------------------- */
  --vs-font-ui:   'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --vs-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --vs-text-display-xl: 40px;
  --vs-text-display:    33px;
  --vs-text-h1:         22px;
  --vs-text-h2:         19px;
  --vs-text-h3:         16px;
  --vs-text-body-l:     15px;
  --vs-text-body:       13.5px;
  --vs-text-body-s:     12px;
  --vs-text-label:      11px;
  --vs-text-label-s:    9.5px;
  --vs-text-micro:      8.5px;
  --vs-text-data-xl:    56px;
  --vs-text-data-l:     34px;
  --vs-text-data:       18px;

  --vs-w-regular:  400;
  --vs-w-medium:   500;
  --vs-w-semibold: 600;
  --vs-w-bold:     700;
  --vs-w-max:      800;

  --vs-track-wordmark: .3em;
  --vs-track-label:    .16em;
  --vs-track-micro:    .14em;
  --vs-track-tight:    -.01em;

  /* ---- Radius ------------------------------------------------------------ */
  --vs-radius-xs:    6px;
  --vs-radius-sm:    8px;
  --vs-radius-md:    11px;
  --vs-radius-lg:    14px;
  --vs-radius-xl:    18px;
  --vs-radius-pill:  999px;
  --vs-radius-glyph: 26%;

  /* ---- Spacing (4px base + dense half-steps) ----------------------------- */
  --vs-space-0:  0;
  --vs-space-1:  4px;
  --vs-space-2:  8px;
  --vs-space-3:  12px;
  --vs-space-4:  16px;
  --vs-space-5:  20px;
  --vs-space-6:  24px;
  --vs-space-7:  28px;
  --vs-space-8:  32px;
  --vs-space-10: 40px;
  --vs-space-12: 48px;
  --vs-space-16: 64px;
  --vs-space-20: 80px;

  /* ---- Elevation --------------------------------------------------------- */
  --vs-elev-0: none;
  --vs-elev-1: 0 1px 2px rgba(0,0,0,.30);
  --vs-elev-2: 0 6px 20px rgba(0,0,0,.35);
  --vs-elev-3: 0 18px 50px rgba(0,0,0,.45);

  /* ---- Focus ------------------------------------------------------------- */
  --vs-ring-focus:  0 0 0 3px rgba(167,139,250,.55);
  --vs-ring-select: 0 0 0 5px rgba(167,139,250,.15);   /* pair with 2.5px solid var(--vs-violet) border */
}

/* ============================================================================
   LIGHT — docs/print; product optional. Values identical to BRAND.md light col.
   ============================================================================ */
:root[data-theme="light"],
.theme-light,
[data-vs][data-theme="light"] {
  /* Base */
  --vs-bg:            #FBF8F3;
  --vs-bg-2:          #F6F2FA;
  /* Surfaces */
  --vs-panel:         #FFFFFF;
  --vs-panel-2:       #F1ECF9;
  --vs-inset:         #F6F2FA;
  /* Borders */
  --vs-line:          rgba(26,22,38,.14);
  --vs-line-2:        rgba(26,22,38,.26);
  /* Text */
  --vs-ink:           #1A1626;
  --vs-text:          #3E3856;
  --vs-muted:         #6E6890;
  /* Accent — collapses to a single deep violet; never pale violet on paper */
  --vs-violet:        #6D28D9;
  --vs-violet-deep:   #6D28D9;
  --vs-headline:      #6D28D9;
  --vs-cyan:          #0E7490;
  /* Semantic */
  --vs-green:         #15803D;
  --vs-amber:         #A15C07;
  --vs-red:           #B3352B;
  --vs-dormant:       #6B7280;
  --vs-info:          #0E7490;
  /* Tints */
  --vs-violet-tint:   rgba(109,40,217,.10);
  --vs-green-tint:    rgba(21,128,61,.12);
  --vs-amber-tint:    rgba(161,92,7,.12);
  --vs-red-tint:      rgba(179,53,43,.12);
  --vs-cyan-tint:     rgba(14,116,137,.12);
  --vs-chip-bg:       rgba(26,22,38,.04);
  --vs-chip-line:     rgba(26,22,38,.16);
  /* Gradients — brand action keeps stops (white text); rest re-anchored deep */
  --vs-grad-brand:        linear-gradient(135deg,#8B5CF6,#6D28D9);
  --vs-grad-rule:         linear-gradient(90deg,#6D28D9,#0E7490);
  --vs-grad-dot:          linear-gradient(135deg,#6D28D9,#0E7490);
  --vs-grad-asst:         linear-gradient(135deg,#F1ECF9,#FFFFFF);
  --vs-grad-ember-hero:   linear-gradient(160deg,#EDE6FA 0%,#F6F2FA 55%,#FBF8F3 100%);
  --vs-grad-ember-scrim:  linear-gradient(90deg,#FBF8F3 8%,transparent 100%);
  /* Glows off on paper */
  --vs-glow-violet:       none;
  --vs-glow-cyan:         none;
  --vs-glow-brand-text:   none;
  /* Elevation — cooler, softer */
  --vs-elev-1: 0 1px 2px rgba(26,22,38,.08);
  --vs-elev-2: 0 6px 20px rgba(26,22,38,.10);
  --vs-elev-3: 0 18px 50px rgba(26,22,38,.14);
  /* Focus */
  --vs-ring-focus:  0 0 0 3px rgba(109,40,217,.45);
  --vs-ring-select: 0 0 0 5px rgba(109,40,217,.18);
}