/* ==========================================================================
   UhAI Intelligence — Design Tokens
   "From Code to Cure"
   Premium, light-first healthcare aesthetic — white space, soft glows,
   corporate typography. Dark navy is reserved for a single signature
   moment per page (final CTA + footer), not a default.
   ========================================================================== */

:root {
  /* ---- Brand Colors ---- */
  --color-navy-950: #050f24;
  --color-navy-900: #071a3d;
  --color-navy-800: #0b2452;
  --color-navy-700: #103068;
  --color-navy-600: #163d82;

  --color-green-700: #158249;
  --color-green-600: #1a9650;
  --color-green-500: #20a65a;
  --color-green-400: #3ecb7c;
  --color-green-300: #7be0a8;

  --color-sky-700: #1364a8;
  --color-sky-600: #1976d2;
  --color-sky-500: #1e88e5;
  --color-sky-400: #4fa8ec;
  --color-sky-300: #8cc8f2;

  /* ---- Neutrals ---- */
  --color-white: #ffffff;
  --color-gray-50: #f8faf9;
  --color-gray-100: #eef1f6;
  --color-gray-200: #e2e7ef;
  --color-gray-300: #cbd4e1;
  --color-gray-400: #99a5b8;
  --color-gray-500: #6b7789;
  --color-gray-600: #4b5568;
  --color-gray-700: #33394a;
  --color-gray-800: #202538;
  --color-gray-900: #12151f;

  /* ---- Semantic ---- */
  --color-success: #20a65a;
  --color-warning: #f5a524;
  --color-error: #e5484d;
  --color-info: #1e88e5;

  /* ---- Flat brand fills (kept as variables so every component that
     references them updates together) — deliberately solid, not gradients:
     a flat color reads calmer and more premium than a gradient wash, and
     matches the light, card-based reference aesthetic this site now follows. --- */
  --gradient-primary: var(--color-navy-900);
  --gradient-hero-dark: var(--color-navy-950);
  /* Flat, near-white section background — the calm light canvas the
     reference design uses behind every card/section. */
  --gradient-hero-light: var(--color-gray-50);
  --gradient-accent: var(--color-green-600);
  --gradient-green: var(--color-green-600);
  --gradient-text: var(--color-sky-600);
  --gradient-surface: var(--color-white);
  --gradient-border: linear-gradient(135deg, rgba(30,136,229,0.45), rgba(32,166,90,0.45));

  /* ---- Soft tint fills (premium "health app" icon badges, not gradients) --- */
  --tint-sky: #eaf4fe;
  --tint-sky-icon: var(--color-sky-600);
  --tint-green: #e8f8ef;
  --tint-green-icon: var(--color-green-700);
  --tint-navy: #eef1f7;
  --tint-navy-icon: var(--color-navy-700);

  /* ---- Light Theme (default) ---- */
  --bg-body: var(--color-white);
  --bg-surface: var(--color-white);
  --bg-surface-alt: var(--color-gray-50);
  --bg-soft-blue: #eef5fd;
  --bg-elevated: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.7);
  --border-glass: rgba(7, 26, 61, 0.08);
  --text-primary: #12151f;
  --text-secondary: #4b5568;
  --text-muted: #6b7789;
  --text-inverse: #ffffff;
  --border-color: #e6eaf1;
  --shadow-color: 220, 30%, 20%;
  --nav-bg: rgba(255, 255, 255, 0.82);
  --card-bg: #ffffff;

  /* ---- Elevation (soft, warm — not harsh drop shadows) ---- */
  --shadow-sm: 0 2px 10px -4px hsla(var(--shadow-color), 0.1);
  --shadow-md: 0 10px 28px -8px hsla(var(--shadow-color), 0.12);
  --shadow-lg: 0 22px 52px -16px hsla(var(--shadow-color), 0.16);
  --shadow-xl: 0 32px 84px -24px hsla(var(--shadow-color), 0.22);
  --shadow-glow-green: 0 0 44px rgba(32, 166, 90, 0.28);
  --shadow-glow-blue: 0 0 44px rgba(30, 136, 229, 0.28);

  /* ---- Typography — corporate premium, healthcare-warm ---- */
  --font-display: "Plus Jakarta Sans", "Inter", "Segoe UI", sans-serif;
  --font-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --fs-display-xl: clamp(2.75rem, 5vw + 1rem, 5rem);
  --fs-display-lg: clamp(2.25rem, 4vw + 1rem, 3.75rem);
  --fs-display-md: clamp(1.9rem, 3vw + 0.8rem, 3rem);
  --fs-h1: clamp(2.1rem, 2.6vw + 1rem, 2.85rem);
  --fs-h2: clamp(1.7rem, 1.8vw + 1rem, 2.25rem);
  --fs-h3: clamp(1.35rem, 1vw + 1rem, 1.65rem);
  --fs-h4: 1.2rem;
  --fs-body-lg: 1.15rem;
  --fs-body: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.8rem;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* ---- Radius ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --header-height: 84px;
}

/* ---- Dark Theme ---- */
:root[data-theme="dark"] {
  --bg-body: #070b14;
  --bg-surface: #0c1220;
  --bg-surface-alt: #0f1626;
  --bg-soft-blue: #0b1c30;
  --bg-elevated: #101a2c;
  --bg-glass: rgba(12, 18, 32, 0.6);
  --border-glass: rgba(255, 255, 255, 0.08);
  --text-primary: #f3f5f9;
  --text-secondary: #b7c0d1;
  --text-muted: #8794a8;
  --text-inverse: #0c1220;
  --border-color: #1c2536;
  --shadow-color: 220, 60%, 3%;
  --nav-bg: rgba(7, 11, 20, 0.72);
  --card-bg: #0e1526;
  --tint-sky: rgba(30,136,229,0.14);
  --tint-sky-icon: var(--color-sky-300);
  --tint-green: rgba(32,166,90,0.14);
  --tint-green-icon: var(--color-green-300);
  --tint-navy: rgba(255,255,255,0.06);
  --tint-navy-icon: #dbe4f2;
}