@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-25:  #eef0f9;
  --ds-indigo-50:  #fcfdfe;
  --ds-indigo-100: #eef1f7;
  --ds-indigo-200: #d8dee9;
  --ds-indigo-400: #9397bf;
  --ds-indigo-500: #5f649a;
  --ds-indigo-600: #393973;
  --ds-indigo-700: #242459;
  --ds-indigo-800: #000050;
  --ds-indigo-900: #00053c;

  /* Sky palette (blocks / info accent) */
  --ds-sky-25:  #f0f9ff;
  --ds-sky-100: #e0f2fe;
  --ds-sky-700: #0369a1;

  /* Rose palette (accent) */
  --ds-rose-100: #fab8b4;
  --ds-rose-200: #fa8982;
  --ds-rose-400: #fa5a50;
  --ds-rose-500: #e6393a;
  --ds-rose-700: #d94a41;

  /* 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:     #767ba8;
  --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(57, 57, 115, 0.10);
  --ds-nav-active-color: #242459;
  --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%);

  --ds-chart-primary: var(--ds-indigo-800);
  --ds-chart-success: #16a34a;
  --ds-chart-warning: #d97706;
  --ds-chart-error:   var(--ds-rose-500);
  --ds-chart-info:    #0284c7;
  --ds-chart-neutral: #94a3b8;
  --ds-chart-cat-1:   #4361ee;
  --ds-chart-cat-2:   #0d9488;
  --ds-chart-cat-3:   #d97706;
  --ds-chart-cat-4:   #9333ea;
  --ds-chart-cat-5:   #db2777;
  --ds-chart-cat-6:   #0284c7;
  --ds-chart-surface-gap: var(--ds-surface-white);

  /* ═══ 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);
}