/* ============================================================
   AIGNITE design tokens
   Colors/brand: locked theme handoff (Design theme brainstorm)
   System conventions (spacing, radii, motion, elevation): Astryx
   Dark-first: the AIGNITE site is dark by default.
   ============================================================ */
:root {
  color-scheme: dark;

  /* ---- color: canvas & surfaces ---- */
  --color-bg-canvas: #17141B;   /* page background (warm purple-black) */
  --color-bg-surface: #1E1A22;  /* raised surface / cards */
  --color-bg-inset: #241F2A;    /* app tile / deeper inset */
  --color-border: #35303C;
  --color-border-strong: #4A4450;

  /* ---- color: text ---- */
  --color-text-primary: #F0EDF3;
  --color-text-secondary: #C4BDC9;
  --color-text-muted: #99919F;
  --color-text-faint: #7A7280;

  /* ---- color: brand ---- */
  --color-brand-blue: #29ABE2;
  --color-brand-purple: #C56CD6;
  --color-ember: #FF9166;       /* "ignition moments" only */
  --color-ember-text: #FF9F7B;

  --gradient-brand: linear-gradient(90deg, #29ABE2, #C56CD6);
  --glow-hero: radial-gradient(90% 150% at 50% -30%,
      rgba(41, 171, 226, 0.15), rgba(197, 108, 214, 0.08) 55%, transparent 80%);

  /* ---- color: tints ---- */
  --tint-blue-bg: rgba(41, 171, 226, 0.12);
  --tint-blue-border: rgba(41, 171, 226, 0.35);
  --tint-blue-text: #6FC6EC;
  --tint-ember-bg: rgba(255, 145, 102, 0.12);
  --tint-purple-bg: rgba(197, 108, 214, 0.14);
  --focus-ring: rgba(41, 171, 226, 0.5);

  /* ---- spacing (Astryx 4px grid) ---- */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-24: 96px;

  /* ---- radius (Astryx roles, AIGNITE values) ---- */
  --radius-inner: 10px;
  --radius-element: 12px;
  --radius-container: 14px;
  --radius-tile: 20px;
  --radius-full: 999px;

  /* ---- typography ---- */
  --font-body: 'Sora', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', Consolas, monospace;

  /* ---- motion (Astryx) ---- */
  --duration-fast: 125ms;
  --duration-medium: 300ms;
  --ease-standard: cubic-bezier(0.24, 1, 0.4, 1);

  /* ---- elevation (Astryx dark convention: shadow + 1px inner bezel) ---- */
  --shadow-low: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-med: 0 2px 4px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-high: 0 2px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}