@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ═══ DESIGN SYSTEM TOKENS ═══ */

  /* Indigo palette (brand) */
  --ds-indigo-50:  #fcfdfe;
  --ds-indigo-100: #eef1f7;
  --ds-indigo-200: #d8dee9;
  --ds-indigo-400: #9397bf;
  --ds-indigo-500: #5f649a;
  --ds-indigo-600: #3f4383;
  --ds-indigo-700: #232766;
  --ds-indigo-800: #000050;
  --ds-indigo-900: #00053c;

  /* Rose palette (accent) */
  --ds-rose-100: #ffc8bc;
  --ds-rose-200: #ff9d8e;
  --ds-rose-400: #fa5a50;
  --ds-rose-500: #e6393a;
  --ds-rose-700: #b3142d;

  /* Semantic */
  --ds-success:        #166534;
  --ds-success-bg:     #f0fdf4;
  --ds-success-border: #bbf7d0;
  --ds-error:          #b91c1c;
  --ds-error-bg:       #fef2f2;
  --ds-error-border:   #fecaca;
  --ds-warning:        #92400e;
  --ds-warning-bg:     #fefce8;
  --ds-warning-border: #fde68a;
  --ds-info:           #1d4ed8;
  --ds-info-bg:        #eff6ff;
  --ds-info-border:    #bfdbfe;

  /* Text */
  --ds-text-primary:   #000050;
  --ds-text-secondary: #232766;
  --ds-text-tertiary:  #5f649a;
  --ds-text-muted:     #9397bf;
  --ds-text-body:      #374151;
  --ds-text-label:     #6b7280;
  --ds-text-white:     #ffffff;

  /* Surface */
  --ds-surface-white:     #ffffff;
  --ds-surface-base:      #f7fafc;
  --ds-surface-secondary: #eef1f7;

  /* Border */
  --ds-border-default:   #edf2f7;
  --ds-border-component: #d8dee9;

  /* Layout */
  --ds-sidebar-width: 240px;
  --ds-header-height: 44px;

  /* Nav */
  --ds-nav-active-bg:    rgba(230, 57, 58, 0.09);
  --ds-nav-active-color: #e6393a;
  --ds-nav-hover-bg:     #f4f6fb;
  --ds-nav-text:         #000050;
  --ds-nav-section-text: #9397bf;
  --ds-nav-sub-indent:   28px;

  /* Typography */
  --ds-font-family: 'Inter', system-ui, sans-serif;

  /* Border radius */
  --ds-radius-xs:   4px;
  --ds-radius-sm:   6px;
  --ds-radius-md:   8px;
  --ds-radius-lg:   12px;
  --ds-radius-xl:   16px;
  --ds-radius-full: 9999px;

  /* Shadows */
  --ds-shadow-card-hover: 0 4px 12px -2px rgba(0, 0, 80, 0.10);
  --ds-shadow-menu: 0 8px 24px -4px rgba(0, 0, 80, 0.12), 0 2px 8px -2px rgba(0, 0, 0, 0.06);

  /* Spacing (4px base) */
  --ds-sp-1:  4px;
  --ds-sp-2:  8px;
  --ds-sp-3:  12px;
  --ds-sp-4:  16px;
  --ds-sp-5:  20px;
  --ds-sp-6:  24px;
  --ds-sp-8:  32px;
  --ds-sp-10: 40px;
  --ds-sp-12: 48px;

  /* Header gradient */
  --ds-header-gradient: linear-gradient(90deg, #000050 0%, #1E1A8C 40%, #0A0660 100%);

  /* ═══ LEGACY ALIASES — REMOVE when main.css is fully migrated ═══ */
  --default-button-background: var(--ds-indigo-800);
  --border: var(--ds-border-component);
  --default-background: var(--ds-surface-white);
  --glass-border: rgba(255, 255, 255, 0.2);
  --text-primary: var(--ds-text-body);
  --text-secondary: var(--ds-text-label);
  --shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --flow-indigo-500: var(--ds-indigo-500);
  --button-hover-background: var(--ds-surface-secondary);
  --welcome-subtitle-color: var(--ds-indigo-600);
  --filter-title-color: var(--ds-text-primary);
  --input-placeholder-color: var(--ds-text-label);
  --table-column-text-color: var(--ds-indigo-900);
}