/* ============================================================
   CargoOS Design System — Design Tokens v1
   "Precision Blue" — premium enterprise visual language
   ============================================================ */

:root {
  /* ---- Brand palette ---- */
  --navy-950: #060B1A;
  --navy-900: #0A1228;
  --navy-800: #101B3A;
  --navy-700: #1A2A52;
  --navy-600: #24386B;

  --blue-600: #2563EB;   /* Electric Blue — primary */
  --blue-500: #3B82F6;
  --blue-400: #60A5FA;
  --cyan-500: #06B6D4;   /* Soft Cyan — secondary */
  --cyan-400: #22D3EE;
  --cyan-300: #67E8F9;

  --emerald-500: #10B981;
  --emerald-600: #059669;
  --amber-500: #F59E0B;
  --amber-600: #D97706;
  --red-500: #EF4444;
  --red-600: #DC2626;
  --violet-500: #8B5CF6;
  --pink-500: #EC4899;

  /* ---- Neutrals ---- */
  --gray-0: #FFFFFF;
  --gray-25: #FCFCFD;
  --gray-50: #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #0F172A;

  /* ---- Semantic: light theme ---- */
  --bg-base: #F7F8FA;
  --bg-surface: #FFFFFF;
  --bg-subtle: #F1F4F8;
  --bg-hover: #F1F5F9;
  --bg-active: #E8EEF7;
  --bg-inverse: var(--navy-900);
  --bg-overlay: rgba(10, 18, 40, 0.45);

  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-tertiary: #94A3B8;
  --text-inverse: #F8FAFC;
  --text-brand: var(--blue-600);

  --border-subtle: #EDF0F4;
  --border-default: #E2E8F0;
  --border-strong: #CBD5E1;
  --border-focus: var(--blue-500);

  --accent: var(--blue-600);
  --accent-soft: #EFF6FF;
  --accent-soft-border: #DBEAFE;

  --success: var(--emerald-600);
  --success-soft: #ECFDF5;
  --warning: var(--amber-600);
  --warning-soft: #FFFBEB;
  --critical: var(--red-600);
  --critical-soft: #FEF2F2;
  --info-soft: #F0F9FF;

  /* ---- Elevation ---- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 24px 64px rgba(15, 23, 42, 0.16);
  --shadow-glow: 0 0 0 3px rgba(37, 99, 235, 0.14);

  /* ---- Radii ---- */
  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ---- Typography ---- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 130ms;
  --dur-base: 200ms;
  --dur-slow: 350ms;

  /* ---- Layout ---- */
  --sidebar-w: 232px;
  --topbar-h: 56px;
}

/* ---- Dark theme ---- */
[data-theme="dark"] {
  --bg-base: #0B0F1A;
  --bg-surface: #111726;
  --bg-subtle: #161D30;
  --bg-hover: #1A2236;
  --bg-active: #1F2A44;
  --bg-inverse: var(--gray-50);
  --bg-overlay: rgba(2, 6, 16, 0.6);

  --text-primary: #F1F5F9;
  --text-secondary: #A6B2C6;
  --text-tertiary: #5E6B82;
  --text-inverse: #0F172A;
  --text-brand: var(--blue-400);

  --border-subtle: #1B2334;
  --border-default: #232D42;
  --border-strong: #34405A;

  --accent: var(--blue-500);
  --accent-soft: rgba(59, 130, 246, 0.12);
  --accent-soft-border: rgba(59, 130, 246, 0.25);

  --success: var(--emerald-500);
  --success-soft: rgba(16, 185, 129, 0.12);
  --warning: var(--amber-500);
  --warning-soft: rgba(245, 158, 11, 0.12);
  --critical: var(--red-500);
  --critical-soft: rgba(239, 68, 68, 0.12);
  --info-soft: rgba(6, 182, 212, 0.10);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 0 3px rgba(59, 130, 246, 0.22);
}