/* ============================================================
   Sigma Squared — Color Tokens
   Anchored by Brand Indigo (#3A3AE8 = indigo-700).
   Product surfaces are LIGHT by default; dark is a marketing
   exception only. Indigo signals meaning & interactivity —
   never decoration.
   ============================================================ */
:root {
  /* ---- Brand primaries ---- */
  --s2-indigo: #3A3AE8;        /* Brand Indigo — CTAs, data highlights, links, active */
  --s2-indigo-light: #5B5BF5;
  --s2-indigo-soft: #E5E5FF;   /* soft fills: badges, banners */
  --s2-indigo-ultra: #F5F5FF;  /* faintest wash */
  --s2-black: #0A0A0A;         /* Near Black — text, primary buttons, dark surfaces */
  --s2-navy: #0A0A0A;          /* alias, reversed-logo backgrounds */
  --s2-white: #FFFFFF;
  --s2-bg: #F5F6FA;            /* app / page background = royal-100 */

  /* ---- Neutral text grays (higher-contrast set, kept for readability) ---- */
  --s2-gray-800: #1F2937;
  --s2-gray-600: #4B5563;      /* body */
  --s2-gray-400: #6B7280;      /* captions */
  --s2-gray-200: #E5E7EB;      /* hairlines, unselected fills */

  /* ---- Product color ramps (source of truth for product surfaces) ---- */
  /* Gray */
  --s2-gray-50:#FBFBFB; --s2-gray-100:#F7F7F7; --s2-gray-150:#E7E8E8; --s2-gray-200-r:#D6D8D9;
  --s2-gray-300:#B8BABC; --s2-gray-400-r:#9DA0A3; --s2-gray-500:#7F8488; --s2-gray-600-r:#696D70;
  --s2-gray-700:#52575B; --s2-gray-800-r:#3B4046; --s2-gray-900:#292D33; --s2-gray-1000:#14181C;
  /* Indigo (brand) */
  --s2-indigo-50:#FAFAFF; --s2-indigo-100:#F5F5FF; --s2-indigo-150:#E5E5FF; --s2-indigo-200:#D4D4FF;
  --s2-indigo-300:#B3B3FC; --s2-indigo-400:#9696FA; --s2-indigo-500:#7373FA; --s2-indigo-600:#5B5BF5;
  --s2-indigo-700:#3A3AE8; --s2-indigo-800:#1D1DC4; --s2-indigo-900:#090999; --s2-indigo-1000:#080857;
  /* Royal */
  --s2-royal-50:#FAFAFC; --s2-royal-100:#F5F6FA; --s2-royal-150:#DFE6F9; --s2-royal-200:#C9D5F8;
  --s2-royal-300:#A1B8F7; --s2-royal-400:#809FF4; --s2-royal-500:#537AEE; --s2-royal-600:#3661E2;
  --s2-royal-700:#1C47CA; --s2-royal-800:#11349C; --s2-royal-900:#0E2467; --s2-royal-1000:#0A1433;
  /* Green */
  --s2-green-50:#F8FCF8; --s2-green-100:#F0FAF0; --s2-green-150:#C7F2C7; --s2-green-200:#9EEA9E;
  --s2-green-300:#4AD34A; --s2-green-400:#20BA20; --s2-green-500:#109910; --s2-green-600:#0B7F0B;
  --s2-green-700:#0A650A; --s2-green-800:#0A4A0A; --s2-green-900:#093409; --s2-green-1000:#071D07;
  /* Red */
  --s2-red-50:#FFFAFA; --s2-red-100:#FFF5F5; --s2-red-150:#FEE1E1; --s2-red-200:#FCCCCC;
  --s2-red-300:#F8A0A0; --s2-red-400:#F27C7C; --s2-red-500:#EE3F3F; --s2-red-600:#D41515;
  --s2-red-700:#AE0C0C; --s2-red-800:#820808; --s2-red-900:#5C0808; --s2-red-1000:#340606;
  /* Yellow */
  --s2-yellow-50:#FBFAF4; --s2-yellow-100:#F7F4E9; --s2-yellow-150:#F8ECAE; --s2-yellow-200:#F9E473;
  --s2-yellow-300:#DAC611; --s2-yellow-400:#BEAD13; --s2-yellow-500:#AD9306; --s2-yellow-600:#907A08;
  --s2-yellow-700:#725B07; --s2-yellow-800:#503B05; --s2-yellow-900:#372906; --s2-yellow-1000:#191303;

  /* ---- Semantic aliases (base / soft fill / accessible text-on-fill) ---- */
  --s2-success: var(--s2-green-500);
  --s2-success-soft: var(--s2-green-100);
  --s2-success-text: var(--s2-green-700);
  --s2-error: var(--s2-red-500);
  --s2-error-soft: var(--s2-red-100);
  --s2-error-text: var(--s2-red-700);
  --s2-warning: var(--s2-yellow-400);
  --s2-warning-soft: var(--s2-yellow-100);
  --s2-warning-text: var(--s2-yellow-700);
  --s2-info: var(--s2-indigo-700);
  --s2-info-soft: var(--s2-indigo-150);
  --s2-info-text: var(--s2-indigo-800);

  /* ---- Text & surface roles ---- */
  --s2-text: var(--s2-black);
  --s2-text-body: var(--s2-gray-600);
  --s2-text-muted: var(--s2-gray-400);
  --s2-text-on-dark: var(--s2-white);
  --s2-link: var(--s2-indigo);
  --s2-surface: var(--s2-white);
  --s2-surface-sunken: var(--s2-bg);
  --s2-surface-dark: var(--s2-black);
  --s2-hairline: var(--s2-gray-200);
}