/* Clear Life Plans design tokens, built from tokens.json. Edit tokens.json, then rebuild this file. */
/* Light is the default. Put data-theme="dark" on <html> to switch the whole page to dark. */

@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root, [data-theme="light"] {
  --brand: #17345E;
  --on-brand: #FFFFFF;
  --on-brand-accent: #6FD79F;
  --on-brand-muted: #CFDCEE;
  --logo-ink: #17345E;
  --logo-check: #1B7A48;
  --paper: #FFFFFF;
  --page: #EEF3F9;
  --surface: #FFFFFF;
  --line: #D5DEEA;
  --control-line: #7C8A9E;
  --heading: #17345E;
  --ink: #1C2430;
  --muted: #4B5768;
  --action: #1B7A48;
  --action-hover: #145F38;
  --on-action: #FFFFFF;
  --selected: #E3F2EA;
  --selected-line: #17345E;
  --track: var(--line);
  --danger: #B42318;
  --danger-soft: #FDECEA;
  --focus: #17345E;
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 5px #17345E;
}

[data-theme="dark"] {
  --brand: #21477F;
  --page: #0E1726;
  --surface: #16223A;
  --line: #2C3B55;
  --control-line: #6E809C;
  --heading: #DCE8F7;
  --ink: #E6ECF4;
  --muted: #A9B6C8;
  --action: #6FD79F;
  --action-hover: #92E4B8;
  --on-action: #0E1726;
  --selected: #183B2B;
  --selected-line: #6FD79F;
  --track: var(--line);
  --danger: #FF9584;
  --danger-soft: #3A1A17;
  --focus: #9CC3FF;
  --focus-ring: 0 0 0 2px #16223A, 0 0 0 5px #9CC3FF;
  color-scheme: dark;
}

:root {
  --font-sans: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --tap-min: 44px;
  --control: 56px;
  --control-lg: 60px;
  --mark-min: 16px;
  --lockup-min: 120px;
}

/* Type styles: add the class to any element, e.g. <h1 class="type-display">. */
.type-display { font-family: var(--font-sans); font-size: 48px; line-height: 54px; font-weight: 700; letter-spacing: -0.01em; }
.type-title { font-family: var(--font-sans); font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.005em; }
.type-question { font-family: var(--font-sans); font-size: 24px; line-height: 30px; font-weight: 700; }
.type-lead { font-family: var(--font-sans); font-size: 20px; line-height: 30px; font-weight: 400; }
.type-body { font-family: var(--font-sans); font-size: 18px; line-height: 27px; font-weight: 400; }
.type-label { font-family: var(--font-sans); font-size: 20px; line-height: 24px; font-weight: 700; }
.type-caption { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 400; }
.type-eyebrow { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }