/* =====================================================
   DESIGN TOKENS - Generated from UX.Design.json v2.0.0
   Last updated: 2026-02-06

   This file is the runtime contract. All values derive
   from the authoritative UX.Design.json specification.
   ===================================================== */

:root,
[data-theme="dark"] {
  /* ─────────────────────────────────────────────────────
     CANVAS COLORS
     ───────────────────────────────────────────────────── */
  --ux-color-bg: #0B1220;
  --ux-color-surface: #0F1B33;
  --ux-color-surface-elevated: #122041;
  --ux-color-surface2: var(--ux-color-surface-elevated); /* alias for JS compatibility */
  --ux-color-glass: rgba(255,255,255,0.04);

  /* ─────────────────────────────────────────────────────
     BORDER COLORS
     ───────────────────────────────────────────────────── */
  --ux-color-border: rgba(255,255,255,0.10);
  --ux-color-border-subtle: rgba(255,255,255,0.06);
  --ux-color-border-emphasis: rgba(255,255,255,0.18);
  --ux-border-thin: 1px solid var(--ux-color-border); /* shorthand for JS compatibility */

  /* ─────────────────────────────────────────────────────
     TEXT COLORS
     ───────────────────────────────────────────────────── */
  --ux-color-text-primary: rgba(255,255,255,0.92);
  --ux-color-text-secondary: rgba(255,255,255,0.72);
  --ux-color-text-muted: rgba(255,255,255,0.56);
  --ux-color-text-inverse: rgba(0,0,0,0.92);

  /* ─────────────────────────────────────────────────────
     ACCENT COLORS
     ───────────────────────────────────────────────────── */
  --ux-color-accent-primary: #6EE7FF;
  --ux-color-accent-primary-glow: rgba(110,231,255,0.25);
  --ux-color-accent-secondary: #A78BFA;
  --ux-color-accent-secondary-glow: rgba(167,139,250,0.25);
  --ux-color-accent-gradient: linear-gradient(135deg, #6EE7FF, #A78BFA);
  --ux-color-focus-ring: rgba(110,231,255,0.65);

  /* ─────────────────────────────────────────────────────
     STATUS COLORS
     ───────────────────────────────────────────────────── */
  --ux-color-status-success: #34D399;
  --ux-color-status-success-bg: rgba(52,211,153,0.12);
  --ux-color-status-warning: #FBBF24;
  --ux-color-status-warning-bg: rgba(251,191,36,0.12);
  --ux-color-status-danger: #FB7185;
  --ux-color-status-danger-bg: rgba(251,113,133,0.12);
  --ux-color-status-info: #60A5FA;
  --ux-color-status-info-bg: rgba(96,165,250,0.12);

  /* ─────────────────────────────────────────────────────
     VISUALIZATION COLORS
     ───────────────────────────────────────────────────── */
  --ux-color-viz-grid: rgba(255,255,255,0.08);
  --ux-color-viz-axis: rgba(255,255,255,0.35);
  --ux-color-viz-c1: #6EE7FF;
  --ux-color-viz-c2: #A78BFA;
  --ux-color-viz-c3: #34D399;
  --ux-color-viz-c4: #FBBF24;
  --ux-color-viz-c5: #FB7185;
  --ux-color-viz-c6: #60A5FA;
  --ux-color-viz-c7: #F472B6;
  --ux-color-viz-c8: #22C55E;
  --ux-color-viz-sequential-low: rgba(110,231,255,0.15);
  --ux-color-viz-sequential-mid: rgba(110,231,255,0.45);
  --ux-color-viz-sequential-high: rgba(110,231,255,0.80);
  --ux-color-viz-diverging-neg: rgba(251,113,133,0.70);
  --ux-color-viz-diverging-neutral: rgba(255,255,255,0.20);
  --ux-color-viz-diverging-pos: rgba(52,211,153,0.70);

  /* ─────────────────────────────────────────────────────
     TYPOGRAPHY
     ───────────────────────────────────────────────────── */
  --ux-font-family-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --ux-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

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

  --ux-font-size-display: 38px;
  --ux-font-size-h1: 28px;
  --ux-font-size-h2: 22px;
  --ux-font-size-h3: 18px;
  --ux-font-size-body: 16px;
  --ux-font-size-small: 14px;
  --ux-font-size-caption: 12px;

  --ux-line-height-display: 1.1;
  --ux-line-height-heading: 1.2;
  --ux-line-height-body: 1.5;

  --ux-letter-spacing-tight: -0.02em;
  --ux-letter-spacing-normal: 0;
  --ux-letter-spacing-wide: 0.01em;

  --ux-numerals-tabular: tabular-nums;

  /* ─────────────────────────────────────────────────────
     TYPOGRAPHY ALIASES (for tokenLoader.js compatibility)
     ───────────────────────────────────────────────────── */
  --ux-type-font-family-sans: var(--ux-font-family-sans);
  --ux-type-font-family-mono: var(--ux-font-family-mono);
  --ux-type-font-weight-regular: var(--ux-font-weight-regular);
  --ux-type-font-weight-medium: var(--ux-font-weight-medium);
  --ux-type-font-weight-semibold: var(--ux-font-weight-semibold);
  --ux-type-font-weight-bold: var(--ux-font-weight-bold);
  --ux-type-font-size-display: var(--ux-font-size-display);
  --ux-type-font-size-h1: var(--ux-font-size-h1);
  --ux-type-font-size-h2: var(--ux-font-size-h2);
  --ux-type-font-size-h3: var(--ux-font-size-h3);
  --ux-type-font-size-body: var(--ux-font-size-body);
  --ux-type-font-size-small: var(--ux-font-size-small);
  --ux-type-font-size-caption: var(--ux-font-size-caption);
  --ux-type-line-height-display: var(--ux-line-height-display);
  --ux-type-line-height-heading: var(--ux-line-height-heading);
  --ux-type-line-height-body: var(--ux-line-height-body);
  --ux-type-letter-spacing-tight: var(--ux-letter-spacing-tight);
  --ux-type-letter-spacing-normal: var(--ux-letter-spacing-normal);
  --ux-type-letter-spacing-wide: var(--ux-letter-spacing-wide);
  --ux-type-numerals-kpi: var(--ux-numerals-tabular);

  /* ─────────────────────────────────────────────────────
     SPACING SCALE
     ───────────────────────────────────────────────────── */
  --ux-space-0: 0px;
  --ux-space-1: 4px;
  --ux-space-2: 8px;
  --ux-space-3: 12px;
  --ux-space-4: 16px;
  --ux-space-5: 20px;
  --ux-space-6: 24px;
  --ux-space-7: 28px;
  --ux-space-8: 32px;
  --ux-space-10: 40px;
  --ux-space-12: 48px;
  --ux-space-16: 64px;
  --ux-space-20: 80px;
  --ux-space-24: 96px;
  --ux-space-40: 160px;

  /* ─────────────────────────────────────────────────────
     LAYOUT
     ───────────────────────────────────────────────────── */
  --ux-layout-max-width: 1280px;
  --ux-layout-gutter: 24px;
  --ux-layout-section-gap: 24px;
  --ux-layout-grid-cols: 12;
  --ux-layout-grid-gap: 20px;
  --ux-layout-header-height: 64px;
  --ux-layout-side-rail-width: 180px;

  /* ─────────────────────────────────────────────────────
     RADIUS
     ───────────────────────────────────────────────────── */
  --ux-radius-none: 0px;
  --ux-radius-sm: 8px;
  --ux-radius-md: 12px;
  --ux-radius-lg: 16px;
  --ux-radius-xl: 20px;
  --ux-radius-full: 9999px;
  --ux-radius-card: 20px;
  --ux-radius-button: 12px;
  --ux-radius-input: 10px;
  --ux-radius-chip: 9999px;
  --ux-radius-chart: 16px;
  --ux-radius-tooltip: 12px;

  /* ─────────────────────────────────────────────────────
     ELEVATION & SHADOWS
     ───────────────────────────────────────────────────── */
  --ux-shadow-sm: 0 2px 8px rgba(0,0,0,0.15);
  --ux-shadow-md: 0 8px 24px rgba(0,0,0,0.25);
  --ux-shadow-lg: 0 12px 36px rgba(0,0,0,0.35);
  --ux-shadow-xl: 0 20px 50px rgba(0,0,0,0.45);
  --ux-shadow-card: 0 8px 32px rgba(0,0,0,0.30);
  --ux-shadow-card-hover: 0 16px 48px rgba(0,0,0,0.40);
  --ux-shadow-popover: 0 20px 60px rgba(0,0,0,0.50);
  --ux-shadow-drawer: 0 0 80px rgba(0,0,0,0.60);
  --ux-glass-blur: 12px;
  --ux-glass-saturation: 1.1;

  /* ─────────────────────────────────────────────────────
     MOTION
     ───────────────────────────────────────────────────── */
  --ux-duration-instant: 0ms;
  --ux-duration-fast: 100ms;
  --ux-duration-base: 200ms;
  --ux-duration-slow: 300ms;
  --ux-duration-slower: 500ms;
  --ux-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1.0);
  --ux-ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ux-ease-accelerate: cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --ux-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.0);

  /* ─────────────────────────────────────────────────────
     MOTION ALIASES (for tokenLoader.js / tailwind compatibility)
     ───────────────────────────────────────────────────── */
  --ux-motion-duration-fast: var(--ux-duration-fast);
  --ux-motion-duration-base: var(--ux-duration-base);
  --ux-motion-duration-slow: var(--ux-duration-slow);
  --ux-motion-ease-standard: var(--ux-ease-standard);
  --ux-motion-ease-emphasized: var(--ux-ease-standard);
  --ux-motion-ease-decelerate: var(--ux-ease-decelerate);
  --ux-motion-ease-accelerate: var(--ux-ease-accelerate);

  /* ─────────────────────────────────────────────────────
     Z-INDEX LAYERS
     ───────────────────────────────────────────────────── */
  --ux-z-base: 1;
  --ux-z-sticky: 40;
  --ux-z-filter-bar: 45;
  --ux-z-header: 50;
  --ux-z-menu: 70;
  --ux-z-tooltip: 80;
  --ux-z-backdrop: 85;
  --ux-z-drawer: 90;
  --ux-z-modal: 100;

  /* ─────────────────────────────────────────────────────
     VISUAL EFFECTS
     ───────────────────────────────────────────────────── */
  --ux-effect-hero-glow: radial-gradient(ellipse at 50% -20%, rgba(110,231,255,0.15) 0%, rgba(167,139,250,0.08) 40%, transparent 70%);
  --ux-effect-grid-texture-opacity: 0.025;
  --ux-effect-grid-texture-size: 48px;
  --ux-effect-grid-texture-color: rgba(255,255,255,0.08);
}

/* ─────────────────────────────────────────────────────────
   LIGHT THEME OVERRIDES
   ───────────────────────────────────────────────────────── */
[data-theme="light"] {
  --ux-color-bg: #F7F8FB;
  --ux-color-surface: #FFFFFF;
  --ux-color-surface-elevated: #F0F3FA;
  --ux-color-glass: rgba(255,255,255,0.85);

  --ux-color-border: rgba(16,24,40,0.10);
  --ux-color-border-subtle: rgba(16,24,40,0.06);
  --ux-color-border-emphasis: rgba(16,24,40,0.18);

  --ux-color-text-primary: rgba(16,24,40,0.92);
  --ux-color-text-secondary: rgba(16,24,40,0.72);
  --ux-color-text-muted: rgba(16,24,40,0.56);
  --ux-color-text-inverse: rgba(255,255,255,0.96);

  --ux-color-accent-primary: #0EA5E9;
  --ux-color-accent-primary-glow: rgba(14,165,233,0.20);
  --ux-color-accent-secondary: #7C3AED;
  --ux-color-accent-secondary-glow: rgba(124,58,237,0.20);
  --ux-color-accent-gradient: linear-gradient(135deg, #0EA5E9, #7C3AED);
  --ux-color-focus-ring: rgba(14,165,233,0.50);

  --ux-color-status-success: #059669;
  --ux-color-status-success-bg: rgba(5,150,105,0.08);
  --ux-color-status-warning: #D97706;
  --ux-color-status-warning-bg: rgba(217,119,6,0.08);
  --ux-color-status-danger: #E11D48;
  --ux-color-status-danger-bg: rgba(225,29,72,0.08);
  --ux-color-status-info: #2563EB;
  --ux-color-status-info-bg: rgba(37,99,235,0.08);

  --ux-color-viz-grid: rgba(16,24,40,0.08);
  --ux-color-viz-axis: rgba(16,24,40,0.35);

  --ux-effect-hero-glow: radial-gradient(ellipse at 50% -20%, rgba(14,165,233,0.10) 0%, rgba(124,58,237,0.05) 40%, transparent 70%);
  --ux-effect-grid-texture-color: rgba(16,24,40,0.04);
}