/* ==========================================================
   variables.css — Design Tokens & CSS Custom Properties
   ========================================================== */

:root {
  /* ---- Primary Colors ---- */
  --color-primary: #0073e6;
  --color-primary-hover: #005bb5;
  --color-primary-light: rgba(0, 115, 230, 0.1);
  --color-primary-dark: #004a99;

  /* ---- Semantic Colors ---- */
  --color-success: #00a854;
  --color-success-hover: #008c46;
  --color-success-light: rgba(0, 168, 84, 0.1);

  --color-warning: #faad14;
  --color-warning-hover: #d99a00;
  --color-warning-light: rgba(250, 173, 20, 0.1);

  --color-danger: #f5222d;
  --color-danger-hover: #d91620;
  --color-danger-light: rgba(245, 34, 45, 0.1);

  --color-info: #13c2c2;
  --color-info-hover: #0fa8a8;
  --color-info-light: rgba(19, 194, 194, 0.1);

  --color-purple: #722ed1;
  --color-purple-hover: #5b21b0;
  --color-purple-light: rgba(114, 46, 209, 0.1);

  /* ---- Neutrals ---- */
  --color-bg: #f5f7fa;
  --color-bg-card: #ffffff;
  --color-bg-sidebar: #1a1f36;
  --color-bg-sidebar-hover: #252b48;
  --color-bg-sidebar-active: #2d3456;
  --color-bg-input: #ffffff;
  --color-bg-hover: #f0f2f5;
  --color-bg-selected: #e6f0ff;
  --color-bg-disabled: #f5f5f5;
  --color-bg-code: #f4f6f8;
  --color-bg-drop: rgba(0, 115, 230, 0.05);

  --color-border: #e2e8f0;
  --color-border-light: #edf2f7;
  --color-border-focus: var(--color-primary);
  --color-border-error: var(--color-danger);

  --color-text: #1a202c;
  --color-text-secondary: #4a5568;
  --color-text-muted: #a0aec0;
  --color-text-placeholder: #cbd5e0;
  --color-text-inverse: #ffffff;
  --color-text-sidebar: #a0aec0;
  --color-text-sidebar-active: #ffffff;
  --color-text-link: var(--color-primary);

  /* ---- Typography ---- */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;

  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-xxl: 32px;

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

  --line-height-tight: 1.25;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.75;

  /* ---- Spacing ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;

  /* ---- Border Radius ---- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 50%;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.16);
  --shadow-focus: 0 0 0 3px rgba(0, 115, 230, 0.25);
  --shadow-error: 0 0 0 3px rgba(245, 34, 45, 0.15);

  /* ---- Transitions ---- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ---- Layout ---- */
  --sidebar-width: 240px;
  --sidebar-collapsed: 64px;
  --header-height: 0px;
  --content-max-width: 1400px;
  --content-padding: var(--space-lg);

  /* ---- Z-Index Scale ---- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 1100;
  --z-loading: 1200;
}