/*
 * CloseDose redesign tokens (R1). Loaded after global.css on every parent page.
 * Source of truth: docs/redesign/README.md "Design system".
 * New components use only --cd-* tokens; legacy global.css rules keep their own
 * variables until each page is rebuilt.
 *
 * Icons: Material Symbols Rounded, subset to the names below. Google Fonts needs
 * the list in alphabetical order. Add a name here before using a new icon.
 */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:wght@500;700&family=Atkinson+Hyperlegible+Next:wght@400;500;700&family=Baloo+2:wght@600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..24,400..500,0..1,0&icon_names=allergy,arrow_forward,bedtime,block,calculate,call,check_circle,chevron_right,child_care,close,edit,emergency,error,event_available,expand_more,info,local_cafe,medication_liquid,menu,menu_book,nutrition,pill,pulmonology,radio_button_unchecked,restaurant,scale,schedule,sick,star,stethoscope,straighten,swap_horiz,thermometer,vaccines,verified_user,volunteer_activism,warning,water_drop&display=block');

:root {
  /* Color: light */
  --cd-bg: #eef3f0;
  --cd-paper: #f8fbf9;
  --cd-surface: #ffffff;
  --cd-sunk: #f1f6f3;
  --cd-ink: #13211c;
  --cd-muted: #4a5d56;
  --cd-faint: #6b7d76;
  --cd-line: #d3ded9;
  --cd-line-strong: #b9c9c2;
  --cd-brand: #1b7560;
  --cd-brand-hi: #24a687;
  --cd-brand-soft: #e1f1ea;
  --cd-on-brand: #ffffff;
  --cd-alert: #b3261e;
  --cd-alert-soft: #fdecea;
  --cd-alert-line: #f3c2bd;
  --cd-on-alert: #ffffff;
  --cd-warn: #7a5200;
  --cd-warn-soft: #fff3d1;
  --cd-shadow: 0 1px 2px rgb(19 50 40 / 0.06), 0 12px 32px -12px rgb(19 50 40 / 0.18);

  /* Type */
  --cd-font-display: 'Baloo 2', 'Nunito', ui-rounded, system-ui, sans-serif;
  --cd-font-body: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
  --cd-font-num: 'Atkinson Hyperlegible Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Shape and motion */
  --cd-r-ctl: 10px;
  --cd-r-panel: 16px;
  --cd-r-pill: 999px;
  --cd-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Legacy bridge: body text moves to Atkinson Hyperlegible Next site-wide. */
  --font-ui: var(--cd-font-body);
  --font-display: var(--cd-font-display);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cd-bg: #0c1512;
    --cd-paper: #101c18;
    --cd-surface: #15231e;
    --cd-sunk: #0f1a16;
    --cd-ink: #e5eeea;
    --cd-muted: #a3b8b0;
    --cd-faint: #83988f;
    --cd-line: #26372f;
    --cd-line-strong: #35493f;
    --cd-brand: #3fc3a0;
    --cd-brand-hi: #5fd6b5;
    --cd-brand-soft: #173a30;
    --cd-on-brand: #06231b;
    --cd-alert: #ff8f86;
    --cd-alert-soft: #35140f;
    --cd-alert-line: #5c2620;
    --cd-on-alert: #1a0503;
    --cd-warn: #f2c14e;
    --cd-warn-soft: #2f2610;
    --cd-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 16px 40px -16px rgb(0 0 0 / 0.6);
  }
}

:root[data-theme="dark"] {
  --cd-bg: #0c1512;
  --cd-paper: #101c18;
  --cd-surface: #15231e;
  --cd-sunk: #0f1a16;
  --cd-ink: #e5eeea;
  --cd-muted: #a3b8b0;
  --cd-faint: #83988f;
  --cd-line: #26372f;
  --cd-line-strong: #35493f;
  --cd-brand: #3fc3a0;
  --cd-brand-hi: #5fd6b5;
  --cd-brand-soft: #173a30;
  --cd-on-brand: #06231b;
  --cd-alert: #ff8f86;
  --cd-alert-soft: #35140f;
  --cd-alert-line: #5c2620;
  --cd-on-alert: #1a0503;
  --cd-warn: #f2c14e;
  --cd-warn-soft: #2f2610;
  --cd-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 16px 40px -16px rgb(0 0 0 / 0.6);
}

/* Icon: <span class="cd-icon" aria-hidden="true">call</span>; add .is-filled for the solid style. */
.cd-icon {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  display: inline-block;
  flex: none;
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'opsz' 24;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.cd-icon.is-filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'opsz' 24; }

/* Numbers a parent reads off the screen: doses, weights, phone numbers. */
.cd-num {
  font-family: var(--cd-font-num) !important;
  font-variant-numeric: tabular-nums;
}