/* MedZ design tokens — the single source of truth for the public site
   (main.css + pages.css) AND the staff CMS (dashboard.css). Loaded first by
   both base templates. Contract documented in design/DESIGN-NOTES.md.
   Nothing but @font-face, :root, and the theme-toggle view-transition rules
   (at the very bottom) may live in this file — the view transition is global and
   theme-owned, and this is the only stylesheet both bases load.

   BREAKPOINT CONTRACT (custom properties cannot be used in media queries):
   the whole project uses exactly TWO breakpoints —
     @media (max-width: 640px)                          phone
     @media (max-width: 900px) / (min-width: 901px)     tablet / nav collapse
   plus prefers-reduced-motion. Any other @media value is a bug;
   audit with: rg "@media" static/css/  */

/* Self-hosted fonts (Phase 7) — subset WOFF2, generated by scripts/subset_fonts.py.
   Served from our own origin so the CSP stays self-only; OFL licenses in static/fonts/. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400.cdb127f8f86f.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-500.1f941b46a2ea.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-600.ee1d5f677fb6.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-700.15563f6fa18f.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-arabic-400.7392f537af39.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-arabic-500.e5c4c8b92a40.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-arabic-600.6999a3b083c8.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-arabic-700.0fda07c05ef5.woff2") format("woff2");
}

:root {
  /* ---- Brand colors ---- */
  --primary: #f1faee;
  --primary-transparent: hsla(105, 55%, 96%, 0.7);
  --secondary: #10172d;
  --accent: #3ca09b;
  --accent-hover: #31807c;
  /* Small teal TEXT on light backgrounds must use this, never --accent
     (#3ca09b on #f1faee is ~2.9:1) nor --accent-hover (~4.35:1 — still fails
     AA for small text). This value is ~5.3:1 on --primary. */
  --accent-text: #2c716d;
  --boxes: hsl(105, 40%, 92%);
  --stat-highlight: #f4ea9e;

  /* ---- Surfaces (semantic aliases) ---- */
  --surface-page: var(--primary);
  --surface-card: var(--boxes);
  --surface-raised: #ffffff;
  --surface-dark: var(--secondary);

  /* ---- Text ---- */
  --dark-text-300: #10172d;
  --dark-text-200: #40485e;
  --dark-text-100: #a3aabf;
  --light-text-400: #f1faee;
  --light-text-300: #b9c1be;
  --light-text-200: #8c9497;
  --light-text-100: #5f6671;
  --border-200: #a3aabf;
  --border-100: #fdfefc;
  /* Subtle divider hairline (navy-tinted on light). Flips to a light tint on
     dark so it stays visible — used for header underline, input borders,
     footer/section rules. */
  --divider: rgba(16, 23, 45, 0.1);
  /* Full-screen drawer scrim. */
  --scrim: rgba(16, 23, 45, 0.5);

  /* ---- Status ---- */
  --danger: #b42318;
  --danger-bg: #fbeaea;
  --warn-bg: #fdf3d8;
  --warn-text: #8a6d1b;
  --ok-bg: #e4f3ea;
  --ok-text: #1f7a4d;

  /* ---- Spacing scale (8px base, 4px half-step) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  /* Fluid rhythm: gap between page sections, and clearance under the fixed header. */
  --section-gap: clamp(4rem, 2.75rem + 4vw, 7rem);
  --header-offset: clamp(6rem, 5rem + 3vw, 8rem);

  /* ---- Type scale ---- */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: clamp(0.875rem, 0.826rem + 0.233vw, 1rem);
  --text-lg: clamp(1rem, 0.784rem + 0.455vw, 1.125rem);
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem; /* h3 */
  --text-3xl: clamp(1.375rem, 1.029rem + 1.628vw, 2.25rem); /* h2 */
  --text-4xl: clamp(1.875rem, 1.2rem + 2.4vw, 3rem); /* h1 */
  --text-display: clamp(2.25rem, 1.55rem + 2.8vw, 3.375rem); /* home hero only */

  /* ---- Elevation (navy-tinted, 4 tiers) ----
     1 = chips/inputs · 2 = resting cards · 3 = hover/feature · 4 = sticky/drawer */
  --elev-1: 0 1px 2px rgba(16, 23, 45, 0.06), 0 1px 4px rgba(16, 23, 45, 0.05);
  --elev-2: 0 2px 8px rgba(16, 23, 45, 0.08);
  --elev-3: 0 8px 24px rgba(16, 23, 45, 0.12);
  --elev-4: 0 16px 48px rgba(16, 23, 45, 0.18);
  /* Focus ring for filled controls (outline stays for links/buttons). */
  --ring: 0 0 0 3px rgba(60, 160, 155, 0.22);

  /* ---- Radii ---- */
  --radius-sm: 8px;
  --radius-md: 12px; /* buttons, inputs */
  --radius-lg: 16px; /* media inside cards, CMS cards */
  --radius-xl: 24px; /* cards, panels */
  --radius-full: 100vw;
  /* Legacy aliases (pre-redesign names) — do not use in new rules. */
  --radius-card: var(--radius-xl);
  --radius-button: var(--radius-md);
  --radius-chip: var(--radius-lg);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-narrow: 680px;

  /* ---- Type faces ---- */
  --font-latin: "Inter", sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", sans-serif;
}

/* =====================================================================
   DARK THEME
   Only COLOR tokens are overridden (spacing/type/radii are theme-agnostic).
   Theme is chosen by a `data-theme` attribute stamped on <html> server-side
   from the `theme` cookie (no flash), with a prefers-color-scheme fallback
   when the visitor hasn't chosen. Contract in design/DESIGN-NOTES.md.

   Surfaces that are intentionally NAVY in light mode (footer, .band--dark,
   .panel-dark, .booking-card, CTA) route through --surface-dark/--secondary;
   in dark mode those become an *elevated* dark so they stay distinct from the
   now-dark page rather than merging into it.

   The dark values are declared once in the shared list below. CSS has no way
   to "include" a variable set, so the same declarations are repeated for the
   auto (OS) case — keep the two blocks in sync.
   ===================================================================== */
:root[data-theme="dark"] {
  /* ---- Brand colors ---- */
  --primary: #0b1020; /* page background — deep navy-black */
  --primary-transparent: hsla(225, 45%, 9%, 0.72); /* header blur bg */
  --secondary: #1a2338; /* "even darker" surfaces — elevated, not pure black */
  --accent: #3ca09b; /* fills stay teal — text on it remains navy (AA holds) */
  --accent-hover: #4bb3ad;
  /* Small teal TEXT needs to be LIGHTER on dark: #2c716d (tuned for mint) fails
     on dark surfaces. #5fc9c2 is ~6.4:1 on --surface-card (#161d33). */
  --accent-text: #5fc9c2;
  --boxes: #161d33; /* card background */
  --stat-highlight: #f4ea9e; /* gold — ~13:1 on the dark band, unchanged */

  /* ---- Surfaces (semantic aliases) ---- */
  --surface-page: var(--primary);
  --surface-card: var(--boxes);
  --surface-raised: #1e2740; /* chips, inputs, filter bar, sponsor tiles */
  --surface-dark: var(--secondary);

  /* ---- Text ---- (the "dark-text" tokens now render on dark surfaces) ---- */
  --dark-text-300: #eef2fb; /* primary text — ~15:1 on --surface-page */
  --dark-text-200: #b7c0d8; /* secondary text — ~8:1 */
  --dark-text-100: #7f89a6; /* muted/placeholder — ~4.6:1 */
  --light-text-400: #f1faee; /* text on navy surfaces — unchanged */
  --light-text-300: #c3ccda;
  --light-text-200: #9aa3b8;
  --light-text-100: #7f89a6;
  --border-200: #2c3652;
  --border-100: #232c46;
  --divider: rgba(255, 255, 255, 0.12);
  --scrim: rgba(0, 0, 0, 0.6);

  /* ---- Status (darkened backgrounds, brightened text for AA on dark) ---- */
  --danger: #f2645a;
  --danger-bg: #3a1614;
  --warn-bg: #3a2f12;
  --warn-text: #f0d68a;
  --ok-bg: #14301f;
  --ok-text: #7fdca9;

  /* ---- Elevation (deeper alpha so shadows read on dark) ---- */
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.32);
  --elev-2: 0 2px 8px rgba(0, 0, 0, 0.44);
  --elev-3: 0 8px 24px rgba(0, 0, 0, 0.5);
  --elev-4: 0 16px 48px rgba(0, 0, 0, 0.6);
  --ring: 0 0 0 3px rgba(95, 201, 194, 0.3);
}

@media (prefers-color-scheme: dark) {
  /* Auto: apply dark only when the user hasn't explicitly chosen light.
     Values MUST mirror :root[data-theme="dark"] above. */
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --primary: #0b1020;
    --primary-transparent: hsla(225, 45%, 9%, 0.72);
    --secondary: #1a2338;
    --accent: #3ca09b;
    --accent-hover: #4bb3ad;
    --accent-text: #5fc9c2;
    --boxes: #161d33;
    --stat-highlight: #f4ea9e;

    --surface-page: var(--primary);
    --surface-card: var(--boxes);
    --surface-raised: #1e2740;
    --surface-dark: var(--secondary);

    --dark-text-300: #eef2fb;
    --dark-text-200: #b7c0d8;
    --dark-text-100: #7f89a6;
    --light-text-400: #f1faee;
    --light-text-300: #c3ccda;
    --light-text-200: #9aa3b8;
    --light-text-100: #7f89a6;
    --border-200: #2c3652;
    --border-100: #232c46;
    --divider: rgba(255, 255, 255, 0.12);
    --scrim: rgba(0, 0, 0, 0.6);

    --danger: #f2645a;
    --danger-bg: #3a1614;
    --warn-bg: #3a2f12;
    --warn-text: #f0d68a;
    --ok-bg: #14301f;
    --ok-text: #7fdca9;

    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.32);
    --elev-2: 0 2px 8px rgba(0, 0, 0, 0.44);
    --elev-3: 0 8px 24px rgba(0, 0, 0, 0.5);
    --elev-4: 0 16px 48px rgba(0, 0, 0, 0.6);
    --ring: 0 0 0 3px rgba(95, 201, 194, 0.3);
  }
}

/* --- Theme-toggle circular reveal (View Transitions API) -------------------
   theme.js calls document.startViewTransition() and sets --reveal-x/--reveal-y
   to the clicked toggle's centre. The NEW theme snapshot is clipped to a circle
   that grows from that point over the OLD one. Browsers without the API skip the
   transition and swap instantly; reduced-motion users get an instant swap too.
   Origin computed from the button's real position, so RTL reveals from its side. */
::view-transition-old(root),
::view-transition-new(root) {
  /* Disable the browser's default cross-fade; we drive the reveal ourselves. */
  animation: none;
  mix-blend-mode: normal;
}
/* Old theme sits beneath; the new theme circles in on top. */
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) {
  z-index: 2;
  animation: theme-reveal 0.45s ease-in;
}
@keyframes theme-reveal {
  from {
    clip-path: circle(0 at var(--reveal-x, 50%) var(--reveal-y, 50%));
  }
  to {
    /* 150vmax guarantees the circle covers the viewport from any origin corner. */
    clip-path: circle(150vmax at var(--reveal-x, 50%) var(--reveal-y, 50%));
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}