/* ============================================================
   TOKENS.CSS — Design System Tokens
   Arioun AI v2
   ============================================================ */

:root {
  /* ── Backgrounds ─────────────────────────────────────────── */
  --bg-0:   #030208;   /* deepest OLED black */
  --bg-1:   #07050F;   /* page background    */
  --bg-2:   #0C0A1A;   /* section alt        */
  --bg-3:   #110E23;   /* card surface       */
  --bg-4:   #17132D;   /* card hover         */
  --bg-5:   #1E1938;   /* elevated surface   */

  /* ── Accent ──────────────────────────────────────────────── */
  --accent:          #7C3AED;
  --accent-bright:   #9333EA;
  --accent-vivid:    #A855F7;
  --accent-dim:      #5B21B6;
  --accent-subtle:   rgba(124,58,237,0.12);
  --accent-border:   rgba(124,58,237,0.22);
  --accent-glow:     rgba(124,58,237,0.28);
  --accent-glow-lg:  rgba(124,58,237,0.14);

  /* ── Secondary accent (blue-violet) ─────────────────────── */
  --blue:        #3B82F6;
  --blue-glow:   rgba(59,130,246,0.15);

  /* ── Text ────────────────────────────────────────────────── */
  --text-1:  #F4F0FF;   /* primary     */
  --text-2:  #B8AEDD;   /* secondary   */
  --text-3:  #7A6FA0;   /* muted       */
  --text-4:  #3D3660;   /* disabled    */

  /* ── Utility ─────────────────────────────────────────────── */
  --white:  #FFFFFF;
  --black:  #000000;

  /* ── Fonts ───────────────────────────────────────────────── */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ── Spacing (8px base grid) ─────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;
  --sp-11: 160px;
  --sp-12: 200px;

  /* ── Radius ──────────────────────────────────────────────── */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:   0 1px 4px  rgba(0,0,0,0.5);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.55);
  --shadow-lg:   0 12px 40px rgba(0,0,0,0.65);
  --shadow-xl:   0 24px 72px rgba(0,0,0,0.70);
  --shadow-glow: 0 0 32px rgba(124,58,237,0.22);
  --shadow-btn:  0 0 20px rgba(124,58,237,0.45);
  --shadow-btn-h:0 0 40px rgba(124,58,237,0.65);

  /* ── Z-index ─────────────────────────────────────────────── */
  --z-0:       0;
  --z-base:    1;
  --z-raised:  10;
  --z-float:   50;
  --z-sticky:  200;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   9999;

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Border ──────────────────────────────────────────────── */
  --border:      1px solid var(--accent-border);
  --border-subtle: 1px solid rgba(124,58,237,0.10);
}