/* ==========================================================================
   Family medicine exam prep: design tokens
   All variables use the --ds- prefix so they will not collide with variables
   already defined on an existing website. Import this file first, then
   components.css.

   Themes: light by default, dark via the OS setting, and a manual override
   with <html data-theme="light"> or <html data-theme="dark">.
   ========================================================================== */

:root {
  /* Surfaces and text */
  --ds-bg: #F3F7F7;          /* page background, cool paper */
  --ds-surface: #FFFFFF;     /* panels, options, inputs */
  --ds-surface-2: #E9F0F1;   /* quiet fills, tracks, segmented control */
  --ds-ink: #10262B;         /* primary text */
  --ds-ink-2: #4B6168;       /* secondary text, labels */
  --ds-line: #D3DFE1;        /* borders and dividers */

  /* Brand: petrol blue */
  --ds-brand: #0A5C7A;
  --ds-brand-hover: #084B65;
  --ds-on-brand: #FFFFFF;
  --ds-brand-tint: #DCEEF4;

  /* Meaning colors. Never use these decoratively. */
  --ds-ok: #1E7F55;    --ds-ok-tint: #E1F3EA;      /* correct, mastered, success */
  --ds-bad: #B8323A;   --ds-bad-tint: #FBE7E8;     /* incorrect, abnormal value, error */
  --ds-warn: #8F5A00;  --ds-warn-tint: #FCF0D6;    /* flagged, caution, due soon */

  /* Mastery ramp: weak to strong */
  --ds-m1: #E27C63;    /* under 40% */
  --ds-m2: #EDBB55;    /* 40 to 59% */
  --ds-m3: #77B6CB;    /* 60 to 79% */
  --ds-m4: #0A5C7A;    /* 80% or more */

  /* Typography */
  --ds-font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ds-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ds-text-xs: 0.78rem;
  --ds-text-sm: 0.9rem;
  --ds-text-md: 1rem;
  --ds-text-lg: 1.1rem;
  --ds-text-xl: 1.5rem;
  --ds-text-2xl: clamp(1.6rem, 4.5vw, 2.4rem);
  --ds-leading-tight: 1.15;
  --ds-leading-ui: 1.5;
  --ds-leading-reading: 1.65;

  /* Radii scale with the size of the element */
  --ds-r-panel: 20px;
  --ds-r-card: 16px;
  --ds-r-option: 12px;
  --ds-r-control: 10px;
  --ds-r-small: 8px;
  --ds-r-cell: 4px;
  --ds-r-pill: 999px;

  /* Spacing, 4px base */
  --ds-space-1: 4px;  --ds-space-2: 8px;  --ds-space-3: 12px; --ds-space-4: 16px;
  --ds-space-5: 20px; --ds-space-6: 24px; --ds-space-8: 32px; --ds-space-11: 44px;

  /* Sizing */
  --ds-tap: 44px;           /* minimum touch target */
  --ds-measure: 64ch;       /* max line length for clinical reading text */
  --ds-page-max: 1240px;

  /* Motion */
  --ds-fast: 150ms;
  --ds-base: 250ms;
}

/* ==========================================================================
   Alternative Clinical Color Language Themes
   Each palette offers tailored light and dark environments with strict AAA contrast.
   ========================================================================== */

/* 1. CALM PETROL (Default: Clinical Cyan / Cool Paper) */
:root,
:root[data-theme="light"]:not([data-palette]),
:root[data-palette="petrol"][data-theme="light"],
:root[data-palette="petrol"]:not([data-theme="dark"]) {
  --ds-bg: #F3F7F7;
  --ds-surface: #FFFFFF;
  --ds-surface-2: #E9F0F1;
  --ds-ink: #10262B;
  --ds-ink-2: #4B6168;
  --ds-line: #D3DFE1;
  --ds-brand: #0A5C7A;
  --ds-brand-hover: #084B65;
  --ds-on-brand: #FFFFFF;
  --ds-brand-tint: #DCEEF4;
  --ds-ok: #1E7F55;    --ds-ok-tint: #E1F3EA;
  --ds-bad: #B8323A;   --ds-bad-tint: #FBE7E8;
  --ds-warn: #8F5A00;  --ds-warn-tint: #FCF0D6;
  --ds-m1: #E27C63; --ds-m2: #EDBB55; --ds-m3: #77B6CB; --ds-m4: #0A5C7A;
}

:root[data-theme="dark"]:not([data-palette]),
:root[data-palette="petrol"][data-theme="dark"] {
  --ds-bg: #0B191D;
  --ds-surface: #11252A;
  --ds-surface-2: #1A3238;
  --ds-ink: #E5F0F2;
  --ds-ink-2: #9BB4BA;
  --ds-line: #26424A;
  --ds-brand: #5CC0DE;
  --ds-brand-hover: #7CCFE8;
  --ds-on-brand: #06222B;
  --ds-brand-tint: #153944;
  --ds-ok: #52C58C;    --ds-ok-tint: #143A2A;
  --ds-bad: #F0808A;   --ds-bad-tint: #40191D;
  --ds-warn: #F2C266;  --ds-warn-tint: #3B2E11;
  --ds-m1: #E0705A; --ds-m2: #E6B24E; --ds-m3: #3E8098; --ds-m4: #79CDE8;
}

/* 2. SAGE & FOREST (Restorative Botanical / Scrub Green) */
:root[data-palette="sage"][data-theme="light"],
:root[data-palette="sage"]:not([data-theme="dark"]) {
  --ds-bg: #F4F7F4;
  --ds-surface: #FFFFFF;
  --ds-surface-2: #E8EFE8;
  --ds-ink: #14281D;
  --ds-ink-2: #486152;
  --ds-line: #D3DFD5;
  --ds-brand: #1E6641;
  --ds-brand-hover: #165033;
  --ds-on-brand: #FFFFFF;
  --ds-brand-tint: #DDF1E5;
  --ds-ok: #1E6641;    --ds-ok-tint: #DDF1E5;
  --ds-bad: #B8323A;   --ds-bad-tint: #FBE7E8;
  --ds-warn: #8F5A00;  --ds-warn-tint: #FCF0D6;
  --ds-m1: #E27C63; --ds-m2: #EDBB55; --ds-m3: #6BBF94; --ds-m4: #1E6641;
}

:root[data-palette="sage"][data-theme="dark"] {
  --ds-bg: #0C1712;
  --ds-surface: #13241C;
  --ds-surface-2: #1A3227;
  --ds-ink: #E6F3EC;
  --ds-ink-2: #92B5A2;
  --ds-line: #223F32;
  --ds-brand: #56CCA0;
  --ds-brand-hover: #76D8B4;
  --ds-on-brand: #062619;
  --ds-brand-tint: #143C2B;
  --ds-ok: #56CCA0;    --ds-ok-tint: #143C2B;
  --ds-bad: #F0808A;   --ds-bad-tint: #40191D;
  --ds-warn: #F2C266;  --ds-warn-tint: #3B2E11;
  --ds-m1: #E0705A; --ds-m2: #E6B24E; --ds-m3: #37805F; --ds-m4: #56CCA0;
}

/* 3. WARM SEPIA (Low-Blue Editorial / Nocturnal Paper) */
:root[data-palette="sepia"][data-theme="light"],
:root[data-palette="sepia"]:not([data-theme="dark"]) {
  --ds-bg: #F8F5EE;
  --ds-surface: #FFFFFF;
  --ds-surface-2: #F0EAD9;
  --ds-ink: #2A2318;
  --ds-ink-2: #6A5B47;
  --ds-line: #E2D9C6;
  --ds-brand: #945008;
  --ds-brand-hover: #753E06;
  --ds-on-brand: #FFFFFF;
  --ds-brand-tint: #FAEDD9;
  --ds-ok: #2E7345;    --ds-ok-tint: #E2F0E6;
  --ds-bad: #B8323A;   --ds-bad-tint: #FBE7E8;
  --ds-warn: #945008;  --ds-warn-tint: #FAEDD9;
  --ds-m1: #D96F52; --ds-m2: #DCA242; --ds-m3: #C28B59; --ds-m4: #945008;
}

:root[data-palette="sepia"][data-theme="dark"] {
  --ds-bg: #181410;
  --ds-surface: #221D17;
  --ds-surface-2: #2E2720;
  --ds-ink: #F3ECE1;
  --ds-ink-2: #B7A895;
  --ds-line: #42382E;
  --ds-brand: #EAA356;
  --ds-brand-hover: #F2B777;
  --ds-on-brand: #221405;
  --ds-brand-tint: #3C2915;
  --ds-ok: #5ABF7C;    --ds-ok-tint: #173822;
  --ds-bad: #F0808A;   --ds-bad-tint: #40191D;
  --ds-warn: #EAA356;  --ds-warn-tint: #3C2915;
  --ds-m1: #E0705A; --ds-m2: #E6B24E; --ds-m3: #A6733E; --ds-m4: #EAA356;
}

/* 4. OXFORD ROYAL NAVY (Academic Board Certification / Deep Blue) */
:root[data-palette="navy"][data-theme="light"],
:root[data-palette="navy"]:not([data-theme="dark"]) {
  --ds-bg: #F2F5F9;
  --ds-surface: #FFFFFF;
  --ds-surface-2: #E4ECF5;
  --ds-ink: #0F1D30;
  --ds-ink-2: #465B77;
  --ds-line: #D0DEEC;
  --ds-brand: #154586;
  --ds-brand-hover: #10366A;
  --ds-on-brand: #FFFFFF;
  --ds-brand-tint: #DFECFC;
  --ds-ok: #1E7F55;    --ds-ok-tint: #E1F3EA;
  --ds-bad: #B8323A;   --ds-bad-tint: #FBE7E8;
  --ds-warn: #8F5A00;  --ds-warn-tint: #FCF0D6;
  --ds-m1: #E27C63; --ds-m2: #EDBB55; --ds-m3: #6B9AD6; --ds-m4: #154586;
}

:root[data-palette="navy"][data-theme="dark"] {
  --ds-bg: #0A111E;
  --ds-surface: #101B2E;
  --ds-surface-2: #182740;
  --ds-ink: #E6EEF8;
  --ds-ink-2: #94A8C4;
  --ds-line: #223756;
  --ds-brand: #62A4F2;
  --ds-brand-hover: #83B8F6;
  --ds-on-brand: #061830;
  --ds-brand-tint: #162E52;
  --ds-ok: #52C58C;    --ds-ok-tint: #143A2A;
  --ds-bad: #F0808A;   --ds-bad-tint: #40191D;
  --ds-warn: #F2C266;  --ds-warn-tint: #3B2E11;
  --ds-m1: #E0705A; --ds-m2: #E6B24E; --ds-m3: #3B6CA8; --ds-m4: #62A4F2;
}

/* 5. OBSIDIAN & SURGICAL SLATE (High-Contrast Neutral) */
:root[data-palette="obsidian"][data-theme="light"],
:root[data-palette="obsidian"]:not([data-theme="dark"]) {
  --ds-bg: #F8FAFC;
  --ds-surface: #FFFFFF;
  --ds-surface-2: #EDF2F7;
  --ds-ink: #0F172A;
  --ds-ink-2: #475569;
  --ds-line: #CBD5E1;
  --ds-brand: #2563EB;
  --ds-brand-hover: #1D4ED8;
  --ds-on-brand: #FFFFFF;
  --ds-brand-tint: #DBEAFE;
  --ds-ok: #16A34A;    --ds-ok-tint: #DCFCE7;
  --ds-bad: #DC2626;   --ds-bad-tint: #FEE2E2;
  --ds-warn: #D97706;  --ds-warn-tint: #FEF3C7;
  --ds-m1: #F87171; --ds-m2: #FBBF24; --ds-m3: #60A5FA; --ds-m4: #2563EB;
}

:root[data-palette="obsidian"][data-theme="dark"] {
  --ds-bg: #0F1117;
  --ds-surface: #181C24;
  --ds-surface-2: #222734;
  --ds-ink: #F1F5F9;
  --ds-ink-2: #94A3B8;
  --ds-line: #2E3646;
  --ds-brand: #60A5FA;
  --ds-brand-hover: #93C5FD;
  --ds-on-brand: #0A162B;
  --ds-brand-tint: #1E2B42;
  --ds-ok: #4ADE80;    --ds-ok-tint: #143521;
  --ds-bad: #F87171;   --ds-bad-tint: #3D171A;
  --ds-warn: #FBBF24;  --ds-warn-tint: #382B12;
  --ds-m1: #EF4444; --ds-m2: #F59E0B; --ds-m3: #3B82F6; --ds-m4: #60A5FA;
}