:root {
  /* Brand (logo) colours */
  --brand-navy: #323b86;
  --brand-red: #d32326;
  --brand-gold: #ffce00;

  /* UI colours */
  --primary: #454ca0;
  --primary-tint: #eef3ff;
  --on-primary: #ffffff;
  --action: #d0291b;
  --action-hover: #a82015;
  --on-action: #ffffff;
  --link: #d0291b;

  --surface: #ffffff;
  --surface-sunken: #f7f7f7;
  --surface-raised: #ffffff;

  --ink-strong: #050505;
  --ink: #3f3f3f;
  --ink-muted: #6b6b6b;
  --ink-subtle: #767676;

  --border: #e4e4e4;
  --border-strong: #8a8a8a;
  --focus: #323b86;

  --success: #1b7a43;  --success-tint: #e8f5ed;
  --warning: #9a5b00;  --warning-tint: #fdf3e1;
  --danger:  #b3261e;  --danger-tint:  #fdeceb;
  --info:    #2d5f8b;  --info-tint:    #e8f0f8;

  /* Type */
  --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-sans: "Inter", "Segoe UI", system-ui, sans-serif;

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* Radius */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 24px; --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(50, 59, 134, 0.08);
  --shadow-md: 0 8px 24px rgba(50, 59, 134, 0.12);
}

/* Dark theme (internal apps only) */
[data-theme="dark"] {
  --primary: #a9b0ff;
  --primary-tint: #1f2450;
  --on-primary: #14162b;
  --link: #ff7a6e;

  --surface: #14162b;
  --surface-sunken: #0d0f1f;
  --surface-raised: #1d2040;

  --ink-strong: #ffffff;
  --ink: #e8e9f2;
  --ink-muted: #b0b3c7;
  --ink-subtle: #8e92a8;

  --border: #2c3058;
  --border-strong: #646a8f;
  --focus: #ffce00;

  --success: #5cc98a;  --success-tint: #15291d;
  --warning: #f0b24a;  --warning-tint: #2e2312;
  --danger:  #ff8a80;  --danger-tint:  #331816;
  --info:    #8dbbe6;  --info-tint:    #16212d;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* Base */
html, body { background: var(--surface-sunken); color: var(--ink); font: 400 14px/20px var(--font-sans); margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--primary); letter-spacing: -1px; font-weight: 400; margin: 0 0 var(--space-3); }
h1 { font-size: 32px; line-height: 1.3; }
h2 { font-size: 28px; line-height: 1.3; font-weight: 500; }
h3 { font-size: 24px; line-height: 1.3; }
h4 { font-size: 20px; line-height: 26px; letter-spacing: 0; }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }