:root {
  color-scheme: light;
  /* Breathe Better campaign palette */
  --navy: #12286e;
  --navy-deep: #0c1c52;
  --ink: #12286e;
  --ink-secondary: #2b3a5e;
  --text: #1f2a44;
  --muted: #5b6478;
  --muted-light: #6b7385;
  --paper: #f7f6f2;
  --card: #ffffff;
  --sky: #eaf2ff;
  --sky-strong: #dbe7ff;
  --line: #e1e7f2;
  --line-light: #f1f4fa;
  --line-subtle: #eef2f8;
  --accent: #1a4fd6;
  --accent-hover: #1541b3;
  --accent-light: #eaf2ff;
  --accent-border: #c7d7fb;
  --accent-emerald: #138a5a;
  --accent-emerald-light: #e8f6ef;
  --accent-emerald-border: #bfe5d1;
  --accent-emerald-dark: #0f6e48;
  --saffron: #c26a06;
  --saffron-light: #fff5e6;
  --brand-red: #e02826;
  --danger: #d32f2f;
  --danger-light: #fdeeee;
  --danger-border: #f5c2c2;
  --font-sans: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'DM Sans', 'Roboto', system-ui, sans-serif;
  /* Type scale */
  --fs-2xs: 0.6875rem; /* 11px uppercase labels, badges */
  --fs-xs: 0.75rem;    /* 12px meta, captions */
  --fs-sm: 0.8125rem;  /* 13px small buttons, secondary text */
  --fs-base: 0.875rem; /* 14px body, table cells, nav */
  --fs-md: 0.9375rem;  /* 15px inputs, buttons, lede */
  --fs-lg: 1rem;       /* 16px brand, emphasis */
  --fs-xl: 1.25rem;    /* 20px section and dialog titles */
  --fs-2xl: 1.5rem;    /* 24px stat values */
  --fs-3xl: 2rem;      /* 32px page titles */
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  --shadow-xs: 0 1px 2px 0 rgb(18 40 110 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(18 40 110 / 0.07), 0 1px 2px -1px rgb(18 40 110 / 0.06);
  --shadow-md: 0 8px 20px -8px rgb(18 40 110 / 0.14);
  --shadow-lg: 0 18px 40px -16px rgb(18 40 110 / 0.22);
  --shadow-btn: 0 6px 16px -6px rgb(26 79 214 / 0.55);
  --shadow-modal: 0 30px 60px -20px rgb(12 28 82 / 0.35);
  --focus-ring: 0 0 0 3px rgb(26 79 214 / 0.2);
  --focus-outline: 2px solid var(--accent);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  font-family: var(--font-sans);
  letter-spacing: -0.015em;
  margin: 0;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.3;
}

p {
  margin: 0;
  line-height: 1.5;
}

.lede {
  color: var(--muted);
  font-size: var(--fs-md);
  margin-top: 0.35rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-light);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--accent-border);
  margin-bottom: 0.6rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.95rem;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink-secondary);
}

.field span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.field-hint {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--muted);
  margin-top: 0.2rem;
}

input:not([type="radio"]):not([type="checkbox"]),
textarea,
select {
  width: 100%;
  border: 1px solid var(--line);
  background: #ffffff;
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted-light);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: auto;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.2;
  padding: 0.7rem 1.25rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
  box-shadow: var(--shadow-btn);
}

.btn:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-btn);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn.ghost {
  background: #ffffff;
  color: var(--navy);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}

.btn.ghost:hover {
  background: var(--sky);
  border-color: var(--accent-border);
  color: var(--navy);
}

.btn.danger {
  background: #ffffff;
  color: var(--danger);
  border: 1px solid var(--danger-border);
  box-shadow: var(--shadow-xs);
}

.btn.danger:hover {
  background: var(--danger-light);
  border-color: var(--danger);
}

.btn.danger-fill {
  background: var(--danger);
  color: #ffffff;
  box-shadow: 0 6px 16px -6px rgb(211 47 47 / 0.5);
}

.btn.danger-fill:hover {
  background: #b42323;
}

.btn:focus-visible,
.icon-btn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.icon-btn:hover {
  background: var(--sky);
  color: var(--navy);
}

.form-error {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  color: var(--danger);
  background: var(--danger-light);
  border: 1px solid var(--danger-border);
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  font-weight: 500;
  margin: 0.5rem 0;
  line-height: 1.4;
}

button {
  font-family: inherit;
}

[hidden] {
  display: none !important;
}