:root {
  /* === PRIMARY -- Deep Teal === */
  --ciq-primary: #0D9488;
  --ciq-primary-hover: #0F766E;
  --ciq-primary-active: #115E59;
  --ciq-primary-subtle: #CCFBF1;
  --ciq-primary-foreground: #FFFFFF;

  /* === ACCENT -- Warm Amber === */
  --ciq-accent: #D97706;
  --ciq-accent-hover: #B45309;
  --ciq-accent-active: #92400E;
  --ciq-accent-subtle: #FEF3C7;
  --ciq-accent-foreground: #FFFFFF;

  /* === SURFACE === */
  --ciq-bg-page: #F8FAFB;
  --ciq-bg-surface: #FFFFFF;
  --ciq-bg-inset: #F1F5F9;
  --ciq-bg-overlay: rgba(15, 23, 42, 0.5);

  /* === TEXT === */
  --ciq-text-primary: #0F172A;
  --ciq-text-secondary: #475569;
  --ciq-text-tertiary: #94A3B8;
  --ciq-text-inverse: #F8FAFC;
  --ciq-text-link: #0D9488;
  --ciq-text-link-hover: #0F766E;

  /* === BORDER === */
  --ciq-border: #E2E8F0;
  --ciq-border-strong: #CBD5E1;
  --ciq-border-focus: #0D9488;
  --ciq-border-error: #DC2626;

  /* === SEMANTIC === */
  --ciq-success: #059669;
  --ciq-success-hover: #047857;
  --ciq-success-subtle: #D1FAE5;
  --ciq-success-foreground: #FFFFFF;
  --ciq-success-text: #065F46;
  --ciq-warning: #D97706;
  --ciq-warning-hover: #B45309;
  --ciq-warning-subtle: #FEF3C7;
  --ciq-warning-foreground: #FFFFFF;
  --ciq-warning-text: #92400E;
  --ciq-error: #DC2626;
  --ciq-error-hover: #B91C1C;
  --ciq-error-subtle: #FEE2E2;
  --ciq-error-foreground: #FFFFFF;
  --ciq-error-text: #991B1B;
  --ciq-info: #0284C7;
  --ciq-info-hover: #0369A1;
  --ciq-info-subtle: #E0F2FE;
  --ciq-info-foreground: #FFFFFF;
  --ciq-info-text: #075985;

  /* === TYPOGRAPHY === */
  --ciq-font-heading: 'Plus Jakarta Sans', sans-serif;
  --ciq-font-body: 'Inter', sans-serif;
  --ciq-font-mono: 'JetBrains Mono', monospace;

  --ciq-text-xs: 0.75rem;
  --ciq-text-sm: 0.875rem;
  --ciq-text-base: 1rem;
  --ciq-text-md: 1.125rem;
  --ciq-text-lg: 1.25rem;
  --ciq-text-xl: 1.563rem;
  --ciq-text-2xl: 1.953rem;
  --ciq-text-3xl: 2.441rem;

  --ciq-leading-tight: 1.15;
  --ciq-leading-snug: 1.3;
  --ciq-leading-normal: 1.5;
  --ciq-leading-relaxed: 1.65;

  --ciq-tracking-tighter: -0.04em;
  --ciq-tracking-tight: -0.02em;
  --ciq-tracking-normal: 0em;
  --ciq-tracking-wide: 0.025em;
  --ciq-tracking-wider: 0.05em;

  --ciq-weight-regular: 400;
  --ciq-weight-medium: 500;
  --ciq-weight-semibold: 600;
  --ciq-weight-bold: 700;
  --ciq-weight-extrabold: 800;

  /* === SPACING === */
  --ciq-space-0: 0;
  --ciq-space-1: 0.25rem;
  --ciq-space-2: 0.5rem;
  --ciq-space-3: 0.75rem;
  --ciq-space-4: 1rem;
  --ciq-space-5: 1.25rem;
  --ciq-space-6: 1.5rem;
  --ciq-space-8: 2rem;
  --ciq-space-10: 2.5rem;
  --ciq-space-12: 3rem;
  --ciq-space-16: 4rem;
  --ciq-space-20: 5rem;

  /* === BORDER RADIUS === */
  --ciq-radius-sm: 6px;
  --ciq-radius-md: 8px;
  --ciq-radius-lg: 12px;
  --ciq-radius-xl: 16px;
  --ciq-radius-full: 9999px;

  /* === ELEVATION === */
  --ciq-shadow-0: none;
  --ciq-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --ciq-shadow-2: 0 4px 6px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04);
  --ciq-shadow-3: 0 10px 15px rgba(15, 23, 42, 0.08), 0 4px 6px rgba(15, 23, 42, 0.03);
  --ciq-shadow-4: 0 20px 25px rgba(15, 23, 42, 0.10), 0 8px 10px rgba(15, 23, 42, 0.04);

  /* === LAYOUT === */
  --ciq-sidebar-expanded: 260px;
  --ciq-sidebar-collapsed: 64px;
  --ciq-topbar-height: 56px;
  --ciq-content-max-width: 1280px;
  --ciq-page-padding: var(--ciq-space-8);
  --ciq-card-padding: var(--ciq-space-6);
  --ciq-section-gap: var(--ciq-space-8);
  --ciq-card-gap: var(--ciq-space-5);

  /* === MOTION === */
  --ciq-duration-fast: 150ms;
  --ciq-duration-normal: 200ms;
  --ciq-duration-slow: 300ms;
  --ciq-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ciq-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ciq-ease-out: cubic-bezier(0, 0, 0.2, 1);
}

/* Dark Mode */
[data-theme="dark"] {
  --ciq-primary: #2DD4BF;
  --ciq-primary-hover: #14B8A6;
  --ciq-primary-active: #0D9488;
  --ciq-primary-subtle: #042F2E;
  --ciq-primary-foreground: #0C1222;
  --ciq-accent: #FBBF24;
  --ciq-accent-hover: #F59E0B;
  --ciq-accent-active: #D97706;
  --ciq-accent-subtle: #451A03;
  --ciq-accent-foreground: #0C1222;
  --ciq-bg-page: #0C1222;
  --ciq-bg-surface: #162032;
  --ciq-bg-inset: #1E293B;
  --ciq-bg-overlay: rgba(0, 0, 0, 0.6);
  --ciq-text-primary: #F1F5F9;
  --ciq-text-secondary: #94A3B8;
  --ciq-text-tertiary: #64748B;
  --ciq-text-inverse: #0F172A;
  --ciq-text-link: #2DD4BF;
  --ciq-text-link-hover: #14B8A6;
  --ciq-border: #1E293B;
  --ciq-border-strong: #334155;
  --ciq-border-focus: #2DD4BF;
  --ciq-border-error: #EF4444;
  --ciq-success: #34D399;
  --ciq-success-subtle: #022C22;
  --ciq-success-text: #A7F3D0;
  --ciq-warning: #FBBF24;
  --ciq-warning-subtle: #451A03;
  --ciq-warning-text: #FDE68A;
  --ciq-error: #F87171;
  --ciq-error-subtle: #450A0A;
  --ciq-error-text: #FECACA;
  --ciq-info: #38BDF8;
  --ciq-info-subtle: #0C4A6E;
  --ciq-info-text: #BAE6FD;
  --ciq-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.15);
  --ciq-shadow-2: 0 4px 6px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
  --ciq-shadow-3: 0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.15);
  --ciq-shadow-4: 0 20px 25px rgba(0, 0, 0, 0.35), 0 8px 10px rgba(0, 0, 0, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ciq-duration-fast: 0ms;
    --ciq-duration-normal: 0ms;
    --ciq-duration-slow: 0ms;
  }
}