/* ==========================================================================
   Gericke-Nesbitt Regenerative Medicine Inc. — theme.css
   Design tokens, reset, base typography, and light / dark (inverted) themes.
   Monochrome only: black, white, and shades of grey.

   Theming model
   -------------
   Tokens are declared on :root (light by default). Any element can be flipped
   by adding `.theme-dark` (inverted) or `.theme-light` — the tokens are
   re-declared in that scope, so a single section, card, or the whole <body>
   can carry its own theme. `background`/`color` on .section etc. always read
   from the tokens, so flipping a wrapper flips everything inside it.
   ========================================================================== */

/* ------- Light theme (default) ------- */
:root,
.theme-light {
  --c-bg:          #fbf9f5;
  --c-surface:     #fffffC;   /* raised panels on the page bg */
  --c-surface-2:   #ebebed;   /* deeper inset / hover */
  --c-fg:          #292923;   /* primary text */
  --c-fg-soft:     #3a3a3e;   /* secondary text */
  --c-muted:       #525252;   /* captions, meta */
  --c-border:      rgba(17, 17, 19, 0.12);
  --c-border-strong: rgba(17, 17, 19, 0.22);

  /* Accent is near-black in light, near-white in dark (still monochrome) */
  --c-accent:      #111113;
  --c-on-accent:   #fffffC;

  /* Glass */
  --glass-bg:      rgba(255, 255, 255, 0.55);
  --glass-border:  rgba(255, 255, 255, 0.65);
  --glass-blur:    16px;

  /* Fade-edge overlays read the page bg so marquees blend seamlessly */
  --fade-color:    255, 255, 255;

  color-scheme: light;
}

/* ------- Dark / inverted theme ------- */
.theme-dark {
  --c-bg:          #0c0c0e;
  --c-surface:     #161618;
  --c-surface-2:   #202024;
  --c-fg:          #fffffC;
  --c-fg-soft:     #fbf9f5;
  --c-muted:       #9a9aa2;
  --c-border:      rgba(255, 255, 255, 0.14);
  --c-border-strong: rgba(255, 255, 255, 0.26);

  --c-accent:      #fffffC;
  --c-on-accent:   #111113;

  --glass-bg:      rgba(22, 22, 26, 0.50);
  --glass-border:  rgba(255, 255, 255, 0.14);
  --glass-blur:    16px;

  --fade-color:    12, 12, 14;

  color-scheme: dark;
}

/* ------- Shared scale tokens (theme-independent) ------- */
:root {
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-pill: 999px;

  --space-section: clamp(3.5rem, 7vw, 6.5rem);

  --font-sans: 'DM Sans', sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 160ms;
  --t-med:  280ms;
  --t-slow: 520ms;

  --maxw: 87.5rem;   /* 1400px */
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease);
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.1;
  letter-spacing: 0;
  font-weight: normal;
  color: var(--c-fg);
}

h1 { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem); }
h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); }

p  { margin: 0 0 1rem; color: var(--c-muted); }

a  { color: inherit; text-decoration-color: var(--c-border-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

ul, ol { margin: 0 0 1rem; padding-left: 1.2rem; }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Honour reduced-motion across all animated components */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visually-hidden helper for accessible labels */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}