/* ============================================================
   AIDI Design System — Token Reference
   Brand: indigo #6366f1, Inter font, dark-first
   Single source of truth for all visual tokens.
   ============================================================ */

/* === BRAND PALETTE === */
/* Raw color values. Use semantic tokens in components, not these directly. */
:root {
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #5558e6;
  --color-indigo-900: #1e1b4b;

  /* neutrals */
  --color-neutral-50:  #f4f5f9;
  --color-neutral-100: #eeeef4;
  --color-neutral-200: #e8e8f0;
  --color-neutral-300: #dcdce8;
  --color-neutral-400: #353856;
  --color-neutral-500: #2a2d42;
  --color-neutral-600: #252840;
  --color-neutral-700: #1e2030;
  --color-neutral-750: #212338;
  --color-neutral-800: #1a1d2e;
  --color-neutral-850: #161822;
  --color-neutral-900: #0f1117;
  --color-neutral-950: #0d0f1a;

  /* semantic status */
  --color-success-dark:  #22c55e;
  --color-success-light: #16a34a;
  --color-warning-dark:  #f59e0b;
  --color-warning-light: #d97706;
  --color-error-dark:    #ef4444;
  --color-error-light:   #dc2626;
}

/* === SEMANTIC TOKENS — DARK THEME (default) === */
:root,
[data-theme="dark"] {
  /* backgrounds */
  --bg:            #0f1117;
  --bg-secondary:  #161822;
  --bg-tertiary:   #1e2030;
  --bg-hover:      #252840;
  --bg-elevated:   #212338;
  --surface:       #1a1d2e;
  --surface-hover: #22253a;

  /* borders */
  --border:       #2a2d42;
  --border-light: #353856;

  /* text */
  --text:           #e4e4ed;
  --text-secondary: #9898b0;
  --text-muted:     #6b6b82;

  /* primary brand */
  --primary:       #6366f1;
  --primary-hover: #5558e6;
  --primary-light: rgba(99, 102, 241, 0.15);
  --primary-glow:  rgba(99, 102, 241, 0.3);

  /* semantic status */
  --success:       #22c55e;
  --success-light: rgba(34, 197, 94, 0.15);
  --warning:       #f59e0b;
  --warning-light: rgba(245, 158, 11, 0.15);
  --error:         #ef4444;
  --error-light:   rgba(239, 68, 68, 0.15);
  --danger:        #ef4444;

  /* shadows */
  --shadow:         0 2px 12px rgba(0, 0, 0, 0.3);
  --shadow-sm:      0 1px 4px  rgba(0, 0, 0, 0.2);
  --shadow-lg:      0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-xl:      0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-inner:   inset 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-glow:    0 0 20px rgba(99, 102, 241, 0.3);
  --shadow-glow-lg: 0 0 32px rgba(99, 102, 241, 0.4);
}

/* === SEMANTIC TOKENS — LIGHT THEME === */
[data-theme="light"] {
  /* backgrounds */
  --bg:            #f4f5f9;
  --bg-secondary:  #ffffff;
  --bg-tertiary:   #eeeef4;
  --bg-hover:      #e8e8f0;
  --bg-elevated:   #f0f0f7;
  --surface:       #ffffff;
  --surface-hover: #f5f5fb;

  /* borders */
  --border:       #dcdce8;
  --border-light: #e8e8f0;

  /* text */
  --text:           #1a1a2e;
  --text-secondary: #555570;
  --text-muted:     #8888a0;

  /* primary brand */
  --primary:       #6366f1;
  --primary-hover: #5558e6;
  --primary-light: rgba(99, 102, 241, 0.1);
  --primary-glow:  rgba(99, 102, 241, 0.2);

  /* semantic status */
  --success:       #16a34a;
  --success-light: rgba(22, 163, 74, 0.1);
  --warning:       #d97706;
  --warning-light: rgba(217, 119, 6, 0.1);
  --error:         #dc2626;
  --error-light:   rgba(220, 38, 38, 0.1);
  --danger:        #dc2626;

  /* shadows */
  --shadow:         0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-sm:      0 1px 4px  rgba(0, 0, 0, 0.05);
  --shadow-lg:      0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl:      0 20px 60px rgba(0, 0, 0, 0.16);
  --shadow-inner:   inset 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-glow:    0 0 20px rgba(99, 102, 241, 0.15);
  --shadow-glow-lg: 0 0 32px rgba(99, 102, 241, 0.2);
}

/* === TYPOGRAPHY === */
:root {
  --font:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* scale */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  20px;
  --text-3xl:  24px;
  --text-4xl:  32px;

  /* weights */
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* line heights */
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
}

/* === SPACING (4px base) === */
:root {
  --space-0:  0px;
  --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;
}

/* === BORDER RADIUS === */
:root {
  --radius-none: 0px;
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-2xl:  24px;
  --radius-full: 9999px;
}

/* === SHADOWS === */
/* Shadows are declared per-theme above (dark/light vary by opacity).
   These additional tokens are theme-independent utilities. */
:root {
  --shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.35);
}

/* === Z-INDEX === */
:root {
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
  --z-topmost:   9999;
}

/* === TRANSITIONS === */
:root {
  --transition:        0.2s ease;
  --transition-fast:   0.1s ease;
  --transition-slow:   0.35s ease;
  --transition-spring: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* === COMPONENT TOKENS === */
:root {
  /* layout */
  --topbar-h:  56px;
  --sidebar-w: 240px;

  /* inputs */
  --input-h:    36px;
  --input-h-lg: 52px;

  /* buttons */
  --btn-h:    36px;
  --btn-h-sm: 28px;
  --btn-h-lg: 48px;

  /* cards */
  --card-padding:    20px;
  --card-padding-lg: 28px;

  /* icon buttons */
  --icon-btn-size:    34px;
  --icon-btn-size-sm: 28px;

  /* forms */
  --form-max-width: 480px;

  /* login page */
  --login-left-w:      44%;
  --login-left-bg:     #1e1b4b;
  --login-left-border: rgba(129, 140, 248, 0.15);
  --login-right-bg:    #0d0f1a;
  --login-form-max:    380px;
}