/*
  Design tokens -- Premium redesign.
  Palette derived from the Highlands Forward brandmark: deep navy, bright
  forward blue, sky blue, warm gold, on soft blue-gray surfaces. Gradients
  and layered depth are intentional here (the Phase 1 "no gradients" rule
  is explicitly lifted for this pass, per the redesign brief).
*/
:root {
  /* Brand */
  --color-navy-950: #0a1b2e;
  --color-navy-900: #0f2540;
  --color-navy-800: #163a63;
  --color-navy-700: #1d4d82;
  --color-blue-600: #1f6fb2;
  --color-blue-500: #2f8fd9;
  --color-sky-400: #6ab6ec;
  --color-sky-100: #e8f3fc;
  --color-gold-600: #c9860a;
  --color-gold-700-text: #8a5c07; /* AA-safe (5.8:1) for gold used as small text on white -- gold-600 itself only clears AA at large-text size */
  --color-gold-500: #e8a91f;
  --color-gold-400: #f0bc45;
  --color-gold-100: #fdf1dc;

  /* Gradients -- used sparingly: hero, sidebar top, primary buttons */
  --gradient-hero: linear-gradient(135deg, var(--color-navy-950) 0%, var(--color-navy-800) 55%, var(--color-blue-700, #164a7a) 100%);
  --gradient-gold-accent: linear-gradient(135deg, var(--color-gold-500), var(--color-gold-400));
  --gradient-sidebar: linear-gradient(165deg, var(--color-navy-950) 0%, var(--color-navy-900) 55%, var(--color-navy-800) 100%);

  /* Neutrals -- soft blue-gray surfaces, not pure gray */
  --color-white: #ffffff;
  --color-surface-0: #ffffff;
  --color-surface-1: #f6f8fb;
  --color-surface-2: #eef2f7;
  --color-surface-3: #e3e9f0;
  --color-border: #dde4ec;
  --color-border-strong: #c7d1dd;

  --color-gray-500: #56606f; /* AA on white/surface-1 -- do not use on dark backgrounds */
  --color-gray-500-on-dark: #a8b5c6; /* AA on navy-950 (8.3:1) -- use this for muted text on dark surfaces instead */
  --color-gray-700: #313a47;
  --color-gray-900: #171c24;

  /* Semantic */
  --color-success: #157a53;
  --color-success-bg: #e5f6ee;
  --color-warning: #92600a;
  --color-warning-bg: #fdf1dc;
  --color-danger: #ae2a22;
  --color-danger-bg: #fbe9e7;
  --color-info: #1d5f96;
  --color-info-bg: #e8f3fc;

  --color-bg: var(--color-surface-1);
  --color-surface: var(--color-surface-0);
  --color-text: var(--color-gray-900);
  --color-text-muted: var(--color-gray-500);
  --color-link: var(--color-blue-600);
  --color-focus-ring: var(--color-gold-600);

  /* Tinted page-section backgrounds (.section--white/--sky/--warm). Kept
     as their own variables (not raw brand tokens directly in layout.css)
     specifically so dark mode can repoint them to dark surfaces --
     these sections sit directly under theme-aware heading/body text
     (--color-heading, --color-text), so the section itself must invert
     with the theme or that text loses contrast against it. */
  --section-bg-white: var(--color-white);
  --section-bg-sky: linear-gradient(180deg, var(--color-sky-100) 0%, #f3f8fd 100%);
  --section-bg-warm: linear-gradient(180deg, var(--color-gold-100) 0%, #fdf9f1 100%);

  /* Heading/title text -- used by text sitting on theme-aware surfaces
     (cards, form labels, topbar). Kept separate from the raw brand
     navy tokens (--color-navy-900 etc.), which stay fixed navy at all
     times for genuinely brand-navy surfaces (buttons, sidebar, hero,
     footer) that are not meant to invert with the theme. */
  --color-heading: var(--color-navy-900);
  --topbar-bg: rgba(255, 255, 255, 0.82);

  /* Sidebar (dark, distinct from main content surfaces) */
  --sidebar-width: 264px;
  --sidebar-width-collapsed: 76px;
  --sidebar-bg: var(--gradient-sidebar);
  --sidebar-text: #c9d6e6;
  --sidebar-text-active: #ffffff;
  --sidebar-item-hover: rgba(255, 255, 255, 0.08);
  --sidebar-item-active: rgba(255, 255, 255, 0.12);
  --sidebar-border: rgba(255, 255, 255, 0.08);

  --topbar-height: 64px;

  /* Typography */
  --font-body: "Manrope", "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-heading: "Manrope", "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-2xl: 2.125rem;
  --fs-3xl: 2.75rem;

  --lh-tight: 1.2;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  --ls-tight: -0.01em;
  --ls-wide: 0.02em;

  /* Spacing (4px base) */
  --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: 5rem;

  /* Radii -- larger, softer per redesign brief */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* Elevation -- layered, soft, multi-level */
  --shadow-1: 0 1px 2px rgba(15, 37, 64, 0.06);
  --shadow-2: 0 2px 8px rgba(15, 37, 64, 0.08), 0 1px 2px rgba(15, 37, 64, 0.04);
  --shadow-3: 0 8px 24px rgba(15, 37, 64, 0.12), 0 2px 6px rgba(15, 37, 64, 0.06);
  --shadow-4: 0 16px 40px rgba(15, 37, 64, 0.18), 0 4px 12px rgba(15, 37, 64, 0.08);
  --shadow-focus: 0 0 0 3px rgba(201, 134, 10, 0.35);

  --max-width: 1500px;
  --max-width-wide: 1560px;

  --transition-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);

  --z-sidebar: 100;
  --z-topbar: 90;
  --z-drawer-overlay: 190;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}

@media (prefers-reduced-motion: reduce) {
  :root { --transition-fast: 0ms; --transition-base: 0ms; }
}

/*
  Dark theme -- overrides the semantic surface/text tokens only.
  Deliberately does NOT touch the raw brand navy/gold tokens
  (--color-navy-*, --color-gold-*, --gradient-*): the sidebar, topbar
  brandmark, hero, footer, and primary buttons are intentionally
  always-navy brand surfaces in both modes, per the "keep HCCTS navy
  and gold branding recognizable" requirement. What changes here is
  the page background, card surfaces, borders, and default text/
  heading colors that those brand surfaces sit on top of.
*/
[data-theme="dark"] {
  --color-bg: #0e1621;
  --color-surface: #17212e;
  --color-surface-0: #17212e;
  --color-surface-1: #121a25;
  --color-surface-2: #1c2734;
  --color-surface-3: #26323f;
  --color-border: #2b3949;
  --color-border-strong: #3c4c5f;

  --color-gray-500: #93a4b8;
  --color-gray-700: #c3d0dd;
  --color-gray-900: #eef3f9;

  --color-text: var(--color-gray-900);
  --color-text-muted: var(--color-gray-500);
  --color-link: var(--color-sky-400);
  --color-heading: #f4f7fb;

  --topbar-bg: rgba(15, 22, 32, 0.82);

  /* Tinted sections repointed to dark navy surfaces so headings/body
     text (now light, via --color-heading/--color-text above) stay
     readable -- fixes white-on-white "At a Glance" / "Quick Actions"
     headings that occurred when only the text color flipped and the
     section background stayed fixed-light. */
  --section-bg-white: var(--color-surface-1);
  --section-bg-sky: linear-gradient(180deg, #16283a 0%, var(--color-surface-1) 100%);
  --section-bg-warm: linear-gradient(180deg, #2b2416 0%, var(--color-surface-1) 100%);
}