/*
  Design tokens — the single source of truth for color, spacing, type and shape.
  Every other stylesheet in this app reads from these variables instead of
  hard-coding values. To re-theme the whole app, change values here only.
*/
:root{
  /* ---- Brand ---- */
  --color-primary-50:#eef4ff;
  --color-primary-100:#dbe7ff;
  --color-primary-200:#b8cfff;
  --color-primary-500:#2f5fdc;
  --color-primary-600:#1d4ed8;
  --color-primary-700:#1740b3;
  --color-primary-contrast:#ffffff;

  --color-accent-50:#e9f8f6;
  --color-accent-100:#cdf0eb;
  --color-accent-500:#0f9b8e;
  --color-accent-600:#0c8478;
  --color-accent-700:#0a6c62;

  /* ---- Neutrals (cool, clinical gray-blue) ---- */
  --gray-25:#fbfcfe;
  --gray-50:#f6f8fb;
  --gray-100:#eef1f6;
  --gray-200:#e3e8f0;
  --gray-300:#cdd5e1;
  --gray-400:#a7b0c0;
  --gray-500:#7c8798;
  --gray-600:#5b6576;
  --gray-700:#414a59;
  --gray-800:#262e3d;
  --gray-900:#12161f;

  /* ---- Semantic ---- */
  --color-success-50:#eafaf1;
  --color-success-600:#0f8a56;
  --color-success-700:#0b6d44;

  --color-warning-50:#fff6e8;
  --color-warning-600:#b3660a;
  --color-warning-700:#8f5108;

  --color-danger-50:#fdecee;
  --color-danger-600:#c31432;
  --color-danger-700:#9e1029;

  --color-violet-50:#f1edfc;
  --color-violet-600:#6d28d9;
  --color-violet-700:#5b21b6;

  --color-indigo-50:#eef0ff;
  --color-indigo-600:#4338ca;
  --color-indigo-700:#3730a3;

  --color-gold-50:#fdf7e3;
  --color-gold-600:#a16207;
  --color-gold-700:#854d0e;

  /* ---- Surface / text roles ---- */
  --bg-canvas:#f4f6fb;
  --bg-surface:#ffffff;
  --bg-surface-alt:#f8fafc;
  --bg-surface-sunken:#f1f4f9;
  --bg-inverse:#111827;

  --border-subtle:#e6eaf1;
  --border-default:#dde3ec;
  --border-strong:#c5cddb;

  --text-primary:#111827;
  --text-secondary:#48526b;
  --text-muted:#7b8598;
  --text-faint:#9aa4b6;
  --text-inverse:#f8fafc;
  --text-link:var(--color-primary-600);

  /* ---- Typography ---- */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;

  --text-xs:11px;
  --text-sm:12.5px;
  --text-base:14px;
  --text-md:15px;
  --text-lg:17px;
  --text-xl:20px;
  --text-2xl:25px;
  --text-3xl:31px;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-black:800;

  --leading-tight:1.2;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  /* ---- Spacing scale ---- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:28px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;

  /* ---- Shape ---- */
  --radius-sm:8px;
  --radius-md:11px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-full:999px;

  /* ---- Elevation (soft, navy-tinted — not pure black) ---- */
  --shadow-xs:0 1px 2px rgba(17,24,57,.05);
  --shadow-sm:0 2px 8px rgba(17,24,57,.06);
  --shadow-md:0 8px 24px rgba(17,24,57,.08);
  --shadow-lg:0 20px 50px rgba(17,24,57,.14);
  --shadow-focus:0 0 0 4px var(--color-primary-100);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.2,.7,.3,1);
  --duration-fast:.14s;
  --duration-base:.2s;

  /* ---- Form controls ---- */
  --control-h:38px;
  --control-h-sm:31px;
  --control-radius:10px;
  --control-pad-x:12px;
  --control-border:var(--gray-300);

  /* ---- Layout ---- */
  --header-h:64px;
  --content-max:1720px;
  --z-header:100;
  --z-dropdown:150;
  --z-modal-backdrop:1000;
  --z-modal:1001;
  --z-toast:1600;

  /* ---- Status colors (appointments / visits / payments) ----
     one definition, reused everywhere: pills, calendar events, dots, borders */
  --status-booked-fg:var(--color-primary-700);
  --status-booked-bg:var(--color-primary-50);
  --status-booked-solid:#3b82f6;

  --status-waiting-fg:var(--color-warning-700);
  --status-waiting-bg:var(--color-warning-50);
  --status-waiting-solid:#f59e0b;

  --status-doctor-fg:var(--color-violet-700);
  --status-doctor-bg:var(--color-violet-50);
  --status-doctor-solid:#7c3aed;

  --status-payment-fg:var(--color-gold-700);
  --status-payment-bg:var(--color-gold-50);
  --status-payment-solid:#eab308;

  --status-completed-fg:var(--color-success-700);
  --status-completed-bg:var(--color-success-50);
  --status-completed-solid:#16a34a;

  --status-cancelled-fg:var(--color-danger-700);
  --status-cancelled-bg:var(--color-danger-50);
  --status-cancelled-solid:#dc2626;

  --status-registered-fg:var(--color-indigo-700);
  --status-registered-bg:var(--color-indigo-50);
  --status-registered-solid:#6366f1;

  /* Calendar appointment blocks: one calm color for every status (legibility
     over color-coding — the clinic asked for this after finding the
     multi-color scheme too busy/hard on the eyes). */
  --cal-event-bg:#bdeef8;
  --cal-event-border:#12a0c4;
  --cal-event-text:#0c4a6e;

  /* legacy variable names some inline styles still read */
  --bg:var(--bg-canvas);
  --card:var(--bg-surface);
  --text:var(--text-primary);
  --muted:var(--text-muted);
  --border:var(--border-default);
  --nav:var(--bg-inverse);
  --primary:var(--color-primary-600);
  --green:var(--color-success-600);
  --red:var(--color-danger-600);
  --amber:var(--color-warning-600);
  --violet:var(--color-violet-600);
  --radius:var(--radius-lg);
}

/* ---- Named themes (Settings -> Tema) ----
   Each block redefines only brand/surface/text/border tokens — never
   spacing, shape, motion, or the clinical status colors (those stay
   constant across themes so appointment/visit statuses read the same
   everywhere, on purpose). Applied via [data-theme] on <html>, resolved
   server-side in header.php from resolve_active_theme(). */
html[data-theme="medical"]{
  --color-primary-50:#e9ecf1;
  --color-primary-100:#d3d9e3;
  --color-primary-200:#a7b3c7;
  --color-primary-500:#2a4468;
  --color-primary-600:#1c2e4a;
  --color-primary-700:#14223a;

  --color-accent-50:#fbf4ea;
  --color-accent-100:#f0e0c8;
  --color-accent-500:#c7a468;
  --color-accent-600:#b8935a;
  --color-accent-700:#96754a;

  --bg-canvas:#f7f7f5;
  --bg-surface:#ffffff;
  --bg-surface-alt:#f1f1ee;
  --bg-surface-sunken:#ececE7;

  --border-subtle:#eeede8;
  --border-default:#e5e2dc;
  --border-strong:#cfcbc0;

  --text-primary:#1f2933;
  --text-secondary:#4b5560;
  --text-muted:#6b7280;
  --text-faint:#8a9099;
}
html[data-theme="navy_teal"]{
  --color-primary-50:#e7eef0;
  --color-primary-100:#c6d8dc;
  --color-primary-200:#8fb2b9;
  --color-primary-500:#14505f;
  --color-primary-600:#0b3b4a;
  --color-primary-700:#082c38;

  --color-accent-50:#e6f7f8;
  --color-accent-100:#c0ebee;
  --color-accent-500:#1eb9c9;
  --color-accent-600:#16a6b6;
  --color-accent-700:#128793;

  --bg-canvas:#f6f8f9;
  --bg-surface:#ffffff;
  --bg-surface-alt:#eff3f4;
  --bg-surface-sunken:#e9eef0;

  --border-subtle:#edf1f2;
  --border-default:#e5eaec;
  --border-strong:#cbd5d8;

  --text-primary:#20272b;
  --text-secondary:#47525a;
  --text-muted:#68757c;
  --text-faint:#8b979d;
}
html[data-theme="mint"]{
  --color-primary-50:#e8f3ee;
  --color-primary-100:#c6e2d5;
  --color-primary-200:#8fc3aa;
  --color-primary-500:#22795a;
  --color-primary-600:#1b6b4a;
  --color-primary-700:#144f37;

  --color-accent-50:#eafbf3;
  --color-accent-100:#cff3e3;
  --color-accent-500:#5fcb9a;
  --color-accent-600:#4fbe8c;
  --color-accent-700:#3b9c71;

  --bg-canvas:#f3faf6;
  --bg-surface:#ffffff;
  --bg-surface-alt:#ebf6f0;
  --bg-surface-sunken:#e3f1e9;

  --border-subtle:#e7f2ec;
  --border-default:#dcebe2;
  --border-strong:#c2d9cc;

  --text-primary:#1f2933;
  --text-secondary:#47554d;
  --text-muted:#64766d;
  --text-faint:#869388;
}