/* =========================================================================
 * Aida AI Design Tokens v2
 * Modern, semantic, themeable. Single source of truth for all design
 * values. Components and utilities reference these — never hardcode
 * colors, spacing, or typography in component CSS.
 *
 * Naming: --<category>-<role>-<variant>
 *   - color-bg-canvas       (surfaces)
 *   - color-text-primary    (text)
 *   - color-accent-primary  (brand)
 *   - color-success         (status)
 *   - space-4               (4-pt grid spacing)
 *   - radius-md             (corner radii)
 *   - shadow-lg             (elevation)
 *   - duration-base         (motion)
 *   - z-modal               (stacking)
 * ========================================================================= */

:root {
  color-scheme: dark;

  /* === Color: surfaces (backgrounds) ============================== */
  --color-bg-canvas: #06111f;        /* page body */
  --color-bg-deep: #040b15;          /* behind gradients / hero */
  --color-bg-elevated: rgba(10, 19, 34, 0.82);
  --color-bg-raised: rgba(14, 26, 46, 0.9);
  --color-bg-overlay: rgba(15, 28, 49, 0.96);
  --color-bg-subtle: rgba(255, 255, 255, 0.04);
  --color-bg-hover: rgba(255, 255, 255, 0.08);
  --color-bg-active: rgba(255, 255, 255, 0.12);
  --color-bg-inverse: #f5f7fb;

  /* === Color: text =============================================== */
  --color-text-primary: #f5f7fb;
  --color-text-secondary: #c5cee0;
  --color-text-muted: #96a8c3;
  --color-text-disabled: #5a6786;
  --color-text-inverse: #040b15;
  --color-text-link: #b8c8ff;
  --color-text-link-hover: #d6e0ff;

  /* === Color: borders ============================================ */
  --color-border-subtle: rgba(159, 180, 216, 0.14);
  --color-border-default: rgba(177, 196, 229, 0.2);
  --color-border-strong: rgba(177, 196, 229, 0.32);
  --color-border-focus: rgba(122, 149, 255, 0.6);
  --color-border-inverse: rgba(4, 11, 21, 0.2);

  /* === Color: brand (Aida) ======================================= */
  --color-accent-primary: #7a95ff;    /* main brand purple-blue */
  --color-accent-hover: #8fa5ff;
  --color-accent-active: #6885f5;
  --color-accent-soft: rgba(122, 149, 255, 0.15);
  --color-accent-secondary: #4fe0c1; /* mint / success accent */
  --color-accent-warm: #ff7a45;      /* orange highlight */
  --color-accent-on: #040b15;        /* text on accent bg */

  /* === Color: status ============================================= */
  --color-success: #4fe0c1;
  --color-success-strong: #6ef0d3;
  --color-success-bg: rgba(79, 224, 193, 0.12);
  --color-warning: #ffb84d;
  --color-warning-bg: rgba(255, 184, 77, 0.12);
  --color-danger: #ff9d8d;
  --color-danger-strong: #ffb0a3;
  --color-danger-bg: rgba(255, 157, 141, 0.12);
  --color-info: #7a95ff;
  --color-info-bg: rgba(122, 149, 255, 0.12);

  /* === Typography ================================================ */
  --font-family-sans: "Inter", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "JetBrains Mono", "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  --font-family-display: "Space Grotesk", "Inter", system-ui, sans-serif;

  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-display: 44px;
  --font-size-hero: 56px;

  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.7;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-base: 0;
  --letter-spacing-wide: 0.04em;
  --letter-spacing-uppercase: 0.08em;

  /* === Spacing (4-pt grid) ======================================= */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* === Radii ===================================================== */
  --radius-none: 0;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 30px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* === Shadows (elevation) ======================================= */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 18px 46px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.36);
  --shadow-xl: 0 40px 120px rgba(0, 0, 0, 0.5);
  --shadow-focus: 0 0 0 3px rgba(122, 149, 255, 0.45);
  --shadow-focus-danger: 0 0 0 3px rgba(255, 157, 141, 0.45);

  /* === Z-index =================================================== */
  --z-hide: -1;
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 50;
  --z-overlay: 100;
  --z-modal: 1000;
  --z-toast: 2000;
  --z-tooltip: 3000;

  /* === Motion ==================================================== */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-slower: 480ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);

  /* === Layout ==================================================== */
  --container-max-width: 1200px;
  --container-narrow: 720px;
  --container-text: 720px;
  --sidebar-width: 240px;
  --sidebar-width-wide: 280px;
  --header-height: 64px;
  --header-height-compact: 52px;
  --backdrop-blur: blur(20px);
  --backdrop-blur-strong: blur(36px);
}

/* === Reduced motion =============================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
  }
}