:root{
  /* Surfaces */
  --background: #ffffff;
  --page-bg: #f7f8fc;
  --surface: #f8faff;
  --surface-alt: #f1f3fa;
  --navy: #0c1731;
  --navy-alt: #101c3d;

  /* Text */
  --text-primary: #0b1220;
  --text-secondary: #4b5875;
  --text-tertiary: #5f6b80;
  --text-on-navy: #ffffff;
  --text-on-navy-dim: #a8b3d1;

  /* Borders */
  --border: #e5e9f2;
  --border-strong: #d3d9e6;
  --border-on-navy: rgba(255,255,255,0.12);

  /* Brand — one accent hue. --brand-secondary is a lighter tint of the same
     indigo, used only to give gradients depth (not as a second accent). */
  --brand-primary: #2f3e9e;
  --brand-secondary: #4356c8;
  --brand-primary-soft: rgba(47,62,158,0.08);
  --brand-gradient: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));

  /* Status */
  --success: #17a66a;
  --success-bg: #edf9f3;
  --success-border: #c7ead9;
  --warning: #e89425;
  /* Darker variants for text: the status colours above are below 4.5:1 on white at small sizes. */
  --success-text: #0f7a4d;
  --warning-text: #a35f00;
  --warning-bg: #fff8eb;
  --warning-border: #f3ddb2;
  --danger: #e2535d;
  --danger-bg: #fff1f2;
  --danger-border: #f6cdd1;

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Shadows (low intensity) */
  --shadow-sm: 0 1px 2px rgba(16,24,53,0.04);
  --shadow-md: 0 4px 16px rgba(16,24,53,0.06);
  --shadow-lg: 0 12px 32px rgba(16,24,53,0.08);
  --shadow-navy: 0 20px 60px -20px rgba(12,23,49,0.5);

  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Layout */
  --container-width: 1200px;
  --section-pad-y: 96px;
  --section-pad-y-sm: 64px;
}