/* ==========================================================================
   OrthoCare Plus — design tokens
   Values are lifted verbatim from the approved prototype.
   The four brand colours and the background are re-emitted from SiteSettings by
   _Layout.cshtml, so a colour change in admin needs no rebuild.
   ========================================================================== */

:root {
  /* -- surfaces ---------------------------------------------------------- */
  --bg: #06080A;
  --surface-1: #080A0C;
  --surface-2: #0A0E10;
  --surface-3: #0D1315;
  --surface-footer: #050708;
  --gradient-card: linear-gradient(180deg, #0C1113, #080B0D);
  --gradient-card-strong: linear-gradient(180deg, #0D1315, #080B0D);

  /* -- text -------------------------------------------------------------- */
  --text: #E6EDEB;
  --text-strong: #FFFFFF;
  --text-body: #96A49F;
  --text-body-alt: #8B9994;
  --text-muted: #69776F;
  --text-muted-alt: #5A6863;
  --text-faint: #4C5A55;
  --text-nav: #9AA8A4;
  --text-nav-hover: #EAF2EF;
  --text-on-soft: #CBD6D3;
  --text-quiet: #77857F;
  --placeholder: #5C6A67;

  /* -- borders ----------------------------------------------------------- */
  --line: rgba(255, 255, 255, .06);
  --line-2: rgba(255, 255, 255, .08);
  --line-3: rgba(255, 255, 255, .12);
  --line-hover: rgba(255, 255, 255, .18);
  --line-hover-strong: rgba(255, 255, 255, .3);

  /* -- accent ------------------------------------------------------------ */
  --accent-1: oklch(0.88 0.16 160);
  --accent-2: oklch(0.76 0.13 200);
  --accent-text: oklch(0.84 0.16 162);
  --accent-line: oklch(0.7 0.12 165);
  --on-accent: #04140D;
  --accent-gradient: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  --accent-gradient-bright: linear-gradient(135deg, oklch(0.92 0.13 160), oklch(0.78 0.13 200));
  --accent-glow: oklch(0.86 0.16 165 / .16);
  --accent-glow-soft: oklch(0.86 0.16 165 / .10);
  --accent-shadow: oklch(0.82 0.16 170 / .7);

  /* -- type -------------------------------------------------------------- */
  --font-ui: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --fs-hero: 88px;
  --fs-hero-2: 74px;
  --fs-hero-3: 66px;
  --fs-h2: 50px;
  --fs-h2-sm: 42px;
  --fs-h3: 26px;
  --fs-lead: 19px;
  --fs-body: 16px;
  --fs-label: 11px;

  /* -- radii ------------------------------------------------------------- */
  --r-6: 6px;
  --r-8: 8px;
  --r-10: 10px;
  --r-11: 11px;
  --r-14: 14px;
  --r-16: 16px;
  --r-18: 18px;
  --r-20: 20px;
  --r-pill: 999px;

  /* -- layout ------------------------------------------------------------ */
  --shell: 1360px;
  --gutter: 44px;
  --grid-cell: 72px;
  --header-h: 74px;
  --section-y: 104px;

  /* -- motion ------------------------------------------------------------ */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: .2s;
  --t-base: .22s;
  --t-slow: .25s;
}

@media (max-width: 1100px) {
  :root {
    --gutter: 28px;
    --section-y: 76px;
    --fs-hero: 58px;
    --fs-h2: 38px;
    --fs-h2-sm: 34px;
    --fs-h3: 22px;
    --fs-lead: 17px;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 20px;
    --section-y: 60px;
    --fs-hero: 40px;
    --fs-h2: 30px;
    --fs-h2-sm: 27px;
    --fs-h3: 20px;
    --fs-lead: 16px;
  }
}