/* ============================================================
   Alfred Design System — Tokens
   Light theme is the default on :root.
   Dark theme is achieved by token-swap on [data-theme="dark"].
   ============================================================ */

:root {
  /* ---------- Brand ---------- */
  --brand-navy: #1E3A5F;
  --brand-navy-hover: #16304F;
  --brand-blue: #319BDE;
  --brand-blue-strong: #2680BC;
  --brand-blue-soft: #E6F1FB;

  /* ---------- Surfaces & text (light) ---------- */
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --surface-2: #F1F5F9;
  --surface-3: #E2E8F0;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-tertiary: #94A3B8;
  --text-inverse: #FFFFFF;

  /* ---------- Semantic ---------- */
  --success: #047857;
  --success-soft: #ECFDF5;
  --warning: #B45309;
  --warning-soft: #FFFBEB;
  --danger: #B91C1C;
  --danger-soft: #FEE2E2;
  --info: #1D4ED8;
  --info-soft: #DBEAFE;
  /* Override accent (violet): marks a setting a tenant has changed away from
     the platform default on the Cloud Settings surface. */
  --override: #7C3AED;
  --override-soft: #F5F3FF;

  /* ---------- Type ---------- */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  --text-10: 10px;
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-18: 18px;
  --text-22: 22px;
  --text-28: 28px;
  --text-36: 36px;

  --weight-regular: 400;
  --weight-medium: 500;

  --leading-tight: 1.25;
  --leading-body: 1.5;

  /* ---------- 4px grid spacing ---------- */
  --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;

  /* ---------- Radii ---------- */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-pill: 999px;

  /* ---------- Shadows ----------
     Cards: 1px ambient only.
     Popovers/modals: shared three-layer stack. */
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-popover:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 12px rgba(15, 23, 42, 0.06),
    0 16px 40px rgba(15, 23, 42, 0.06);
  --shadow-overlay: 0 8px 24px rgba(15, 23, 42, 0.16);
  --shadow-focus: 0 0 0 3px rgba(49, 155, 222, 0.28);

  /* ---------- Density ---------- */
  --header-h: 56px;
  --control-h: 32px;
  --control-h-sm: 28px;
  --row-py: 11px;          /* table cell vertical padding */
  --container-max: 1440px;
  --container-pad: 20px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 160ms;
  --dur-slow: 240ms;

  /* ---------- Z ---------- */
  --z-header: 100;
  --z-popover-backdrop: 150;
  --z-popover: 200;
  --z-modal-backdrop: 250;
  --z-modal: 300;
  --z-toast: 400;

  color-scheme: light;
}

/* ============================================================
   Dark theme — token swap only.
   Brand stays. Surfaces invert. Semantic-softs deepen.
   ============================================================ */
[data-theme="dark"] {
  --bg: #0B1220;
  --surface: #111827;
  --surface-2: #1A2333;
  --surface-3: #243049;
  --border: #1F2A3D;
  --border-strong: #334155;
  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-tertiary: #64748B;
  --text-inverse: #0F172A;

  --brand-navy: #2D5489;          /* lift navy so it reads on dark */
  --brand-navy-hover: #36649E;
  --brand-blue: #4FB1EF;
  --brand-blue-strong: #7FC6F4;
  --brand-blue-soft: rgba(79, 177, 239, 0.14);

  --success: #34D399;
  --success-soft: rgba(52, 211, 153, 0.12);
  --warning: #F59E0B;
  --warning-soft: rgba(245, 158, 11, 0.12);
  --danger: #F87171;
  --danger-soft: rgba(248, 113, 113, 0.12);
  --info: #60A5FA;
  --info-soft: rgba(96, 165, 250, 0.14);
  --override: #A78BFA;
  --override-soft: rgba(167, 139, 250, 0.14);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-popover:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.45),
    0 16px 40px rgba(0, 0, 0, 0.45);
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-focus: 0 0 0 3px rgba(79, 177, 239, 0.32);

  color-scheme: dark;
}

/* Honour system pref when theme=system */
@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --bg: #0B1220;
    --surface: #111827;
    --surface-2: #1A2333;
    --surface-3: #243049;
    --border: #1F2A3D;
    --border-strong: #334155;
    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --text-tertiary: #64748B;
    --text-inverse: #0F172A;
    --brand-navy: #2D5489;
    --brand-navy-hover: #36649E;
    --brand-blue: #4FB1EF;
    --brand-blue-strong: #7FC6F4;
    --brand-blue-soft: rgba(79, 177, 239, 0.14);
    --success: #34D399;
    --success-soft: rgba(52, 211, 153, 0.12);
    --warning: #F59E0B;
    --warning-soft: rgba(245, 158, 11, 0.12);
    --danger: #F87171;
    --danger-soft: rgba(248, 113, 113, 0.12);
    --info: #60A5FA;
    --info-soft: rgba(96, 165, 250, 0.14);
    --override: #A78BFA;
    --override-soft: rgba(167, 139, 250, 0.14);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-popover:
      0 1px 2px rgba(0, 0, 0, 0.5),
      0 4px 12px rgba(0, 0, 0, 0.45),
      0 16px 40px rgba(0, 0, 0, 0.45);
    --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-focus: 0 0 0 3px rgba(79, 177, 239, 0.32);
    color-scheme: dark;
  }
}