:root {
  /* Core brand palette */
  --color-navy-950: #061426;
  --color-navy-900: #08203a;
  --color-navy-800: #0d2d4d;
  --color-court-600: #0877d1;
  --color-court-500: #1292e8;
  --color-court-400: #43b7f4;
  --color-electric: #76f7c5;
  --color-electric-strong: #42eeb1;

  /* Neutral surfaces and text */
  --color-warm-white: #f7f5ef;
  --color-surface: #fffdf8;
  --color-surface-raised: #ffffff;
  --color-text: #10243a;
  --color-text-muted: #536579;
  --color-text-on-dark: #f7fbff;
  --color-text-on-dark-muted: rgba(233, 243, 252, 0.72);

  /* Semantic foundation */
  --color-primary: var(--color-navy-900);
  --color-highlight: var(--color-court-500);
  --color-accent: var(--color-electric);
  --color-border: rgba(8, 32, 58, 0.14);
  --color-border-strong: rgba(8, 32, 58, 0.24);
  --color-border-dark: rgba(255, 255, 255, 0.14);
  --color-success: #087a58;
  --color-success-soft: #e5f7f0;
  --color-error: #b9384a;
  --color-error-soft: #fff0f2;
  --color-disabled: #9aa6b2;
  --color-disabled-soft: #e9edf0;
  --focus-ring: 0 0 0 3px rgba(118, 247, 197, 0.34);

  /* Legacy aliases: keep current markup working while retiring the old palette. */
  --color-ink: var(--color-navy-900);
  --color-charcoal: var(--color-navy-800);
  --color-porcelain: var(--color-warm-white);
  --color-ivory: var(--color-surface);
  --color-brass: var(--color-court-500);
  --color-moss: var(--color-electric-strong);
  --color-line: var(--color-border-dark);

  --shadow-xs: 0 1px 2px rgba(6, 20, 38, 0.06);
  --shadow-soft: 0 18px 50px rgba(6, 20, 38, 0.09);
  --shadow-raised: 0 26px 80px rgba(6, 20, 38, 0.14);
  --shadow-deep: 0 32px 90px rgba(2, 12, 24, 0.34);
  --shadow-highlight: 0 18px 54px rgba(18, 146, 232, 0.24);
  --shadow-brass: var(--shadow-highlight);
}

html {
  background: var(--color-warm-white);
  color-scheme: light;
}

body {
  background: var(--color-warm-white);
  color: var(--color-text);
}

::selection {
  background: var(--color-electric);
  color: var(--color-navy-950);
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--color-electric);
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
}

.ds-surface {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(24px);
}

.ds-card {
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-soft);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), border-color 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ds-card:hover {
  transform: translateY(-3px);
  border-color: rgba(18, 146, 232, 0.44);
  box-shadow: var(--shadow-raised);
}

/* Tailwind legacy-token bridge. These utilities are emitted from inline configs
   in the current pages; the bridge keeps the palette global without HTML edits. */
.bg-ink { background-color: var(--color-navy-900) !important; }
.bg-charcoal { background-color: var(--color-navy-800) !important; }
.bg-midnight { background-color: var(--color-navy-950) !important; }
.bg-porcelain { background-color: var(--color-warm-white) !important; }
.bg-ivory { background-color: var(--color-surface) !important; }
.bg-brass { background-color: var(--color-court-500) !important; }
.bg-ink\/10 { background-color: rgba(8, 32, 58, 0.1) !important; }
.bg-ink\/30 { background-color: rgba(8, 32, 58, 0.3) !important; }
.bg-ink\/48 { background-color: rgba(8, 32, 58, 0.48) !important; }
.bg-ink\/58 { background-color: rgba(8, 32, 58, 0.58) !important; }
.bg-ivory\/80 { background-color: rgba(255, 253, 248, 0.8) !important; }
.text-ink { color: var(--color-text) !important; }
.text-charcoal { color: var(--color-text-muted) !important; }
.text-ivory { color: var(--color-text-on-dark) !important; }
.text-brass { color: var(--color-court-500) !important; }
.text-moss { color: var(--color-electric-strong) !important; }
.border-ink { border-color: var(--color-border-strong) !important; }
.border-brass { border-color: var(--color-court-500) !important; }
.border-brass\/40,
.border-brass\/45,
.border-brass\/50,
.border-brass\/55 { border-color: rgba(18, 146, 232, 0.46) !important; }
.text-brass\/20 { color: rgba(18, 146, 232, 0.2) !important; }
.text-brass\/70 { color: rgba(18, 146, 232, 0.7) !important; }
.from-ink { --tw-gradient-from: var(--color-navy-900) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(8, 32, 58, 0) var(--tw-gradient-to-position) !important; }
.from-ink\/70 { --tw-gradient-from: rgba(8, 32, 58, 0.7) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(8, 32, 58, 0) var(--tw-gradient-to-position) !important; }
.from-charcoal { --tw-gradient-from: var(--color-navy-800) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(13, 45, 77, 0) var(--tw-gradient-to-position) !important; }
.from-midnight { --tw-gradient-from: var(--color-navy-950) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(6, 20, 38, 0) var(--tw-gradient-to-position) !important; }
.via-ink\/75 { --tw-gradient-via: rgba(8, 32, 58, 0.75) var(--tw-gradient-via-position) !important; }
.via-ink\/76 { --tw-gradient-via: rgba(8, 32, 58, 0.76) var(--tw-gradient-via-position) !important; }
.via-charcoal\/70 { --tw-gradient-via: rgba(13, 45, 77, 0.7) var(--tw-gradient-via-position) !important; }
.via-midnight\/72 { --tw-gradient-via: rgba(6, 20, 38, 0.72) var(--tw-gradient-via-position) !important; }
.via-brass\/40 { --tw-gradient-via: rgba(18, 146, 232, 0.4) var(--tw-gradient-via-position) !important; }

.hover\:bg-brass:hover { background-color: var(--color-court-600) !important; }
.hover\:bg-brass\/20:hover { background-color: rgba(18, 146, 232, 0.2) !important; }
.hover\:bg-ivory:hover,
.focus\:bg-ivory:focus { background-color: var(--color-surface) !important; }
.hover\:text-brass:hover,
.group:hover .group-hover\:text-brass { color: var(--color-court-400) !important; }
.hover\:text-ink:hover,
.focus\:text-ink:focus,
.group:hover .group-hover\:text-ink { color: var(--color-text) !important; }
.hover\:border-brass:hover,
.hover\:border-brass\/40:hover,
.hover\:border-brass\/50:hover,
.hover\:border-brass\/55:hover,
.focus\:border-brass:focus { border-color: var(--color-court-400) !important; }
.focus\:ring-brass:focus { --tw-ring-color: rgba(118, 247, 197, 0.52) !important; }