:root {
  --brand-green: #66D84E;
  --brand-mauve: #7E6A8B;
  --brand-cyan: #57DFE0;
  --brand-navy: #071A2B;
  --brand-steel: #385875;

  --bg: #F4F8FB;
  --surface: #FFFFFF;
  --surface-2: #EAF4F8;
  --text: var(--brand-navy);
  --muted: var(--brand-steel);
  --border: #C8D6E3;

  --primary: var(--brand-steel);
  --primary-strong: var(--brand-navy);
  --primary-soft: #DDF8F9;
  --primary-soft-strong: #C8F0F2;
  --accent-border: var(--brand-cyan);
  --focus-ring: #9CEAEC;
  --warm-surface: #F0ECF3;
  --warm-border: var(--brand-mauve);
  --text-strong: var(--brand-navy);
  --text-soft-strong: var(--brand-steel);
  --success: var(--brand-green);
  --danger: var(--brand-mauve);
  --danger-soft: #EFE8F3;
  --success-soft: #E8F8E4;

  --sans: 'Josefin Sans', sans-serif;
  --mono: 'Josefin Sans', sans-serif;
  --logo: 'Josefin Sans', sans-serif;

  --radius: 6px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.10);

  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --control-h: 50px;
  --control-h-lg: 50px;

  --bp-md: 900px;
}