:root {
  /* ── Base palette ─────────────────────────── */
  /* Brand mint teal (from logo) */
  --teal-500: #1F5F58;   /* brand primary */
  --teal-600: #174E48;   /* hover */
  --teal-700: #123F3A;   /* active / pressed */
  --teal-900: #0E322E;   /* deep brand ink */
  --cyan-300: #8FC7BB;   /* secondary mint */
  --cyan-100: #DCEAE6;   /* soft mint fill */
  --cyan-50:  #F3FAF8;   /* pale mint tint */
  /* Ink & grays (dr.smile-style: white page, navy ink, cool gray cards) */
  --navy-900: #0A1128;   /* headings, dark buttons, footer */
  --navy-600: #47506B;   /* secondary text */
  --gray-100: #F2F4F8;   /* section / card gray */
  --gray-200: #E7EAF1;   /* borders, dividers */
  --white: #FFFFFF;
  /* Semantic states */
  --green-600: #16A34A;
  --green-50:  #F0FDF4;
  --red-600: #DC2626;
  --red-50:  #FEF2F2;
  --amber-500: #F59E0B;
  --amber-50:  #FFFBEB;
  /* legacy aliases (kept for older cards) */
  --slate-900: var(--navy-900);
  --slate-500: var(--navy-600);
  --slate-100: var(--gray-100);

  /* ── Semantic aliases ─────────────────────── */
  --brand-primary: var(--teal-500);
  --on-primary: var(--white);
  --brand-secondary: var(--cyan-300);
  --on-secondary: var(--navy-900);
  --brand-dark: var(--navy-900);   /* dark pill buttons, footer */
  --on-dark: var(--white);
  --brand-accent: var(--green-600);
  --on-accent: var(--white);

  --bg-page: var(--white);
  --surface-card: var(--white);
  --surface-muted: var(--gray-100);
  --surface-primary-soft: rgba(31, 95, 88, 0.08);
  --surface-success-soft: rgba(22, 163, 74, 0.10);
  --surface-danger-soft: rgba(220, 38, 38, 0.10);

  --text-body: var(--navy-900);
  --text-strong: var(--navy-900);
  --text-muted: var(--navy-600);
  --text-link: var(--brand-primary);
  --text-link-hover: var(--teal-600);
  --text-success: var(--green-600);
  --text-danger: var(--red-600);

  --border-default: var(--gray-200);
  --border-input: var(--gray-200);
  --focus-ring: var(--brand-primary);
}