/* =====================================================================
   ClinicOS — Design Tokens
   Single source of truth for colour, type, space, motion, elevation.
   Every page of the site consumes these variables. Never hard-code.
   ===================================================================== */

:root {
  /* ---------- Colour: Paper (light surfaces) ---------- */
  --c-paper:        #F7F5F2;   /* base page */
  --c-paper-raised: #FFFFFF;   /* cards on paper */
  --c-paper-sunken: #EFEBE5;   /* quiet bands, placeholders */
  --c-paper-edge:   #E4DFD8;

  /* ---------- Colour: Ink (dark surfaces) ---------- */
  --c-ink:          #14171A;   /* deep section background */
  --c-ink-raised:   #1C2124;

  /* ---------- Colour: Text ---------- */
  --c-text:         #14171A;   /* primary on paper */
  --c-text-soft:    #4B5257;   /* secondary on paper */
  --c-text-mute:    #7E858A;   /* meta / eyebrow on paper */
  --c-text-invert:      #F3F1EE; /* primary on ink */
  --c-text-invert-soft: #B4B9BA; /* secondary on ink */
  --c-text-invert-mute: #7E8688; /* meta on ink */

  /* ---------- Colour: Accent (restrained, clinical) ---------- */
  --c-accent:       #235043;   /* pine — used sparingly */
  --c-accent-deep:  #1A3B32;
  --c-accent-soft:  #6E8C82;
  --c-accent-wash:  #E7EDE9;

  /* ---------- Colour: Lines ---------- */
  --c-line:         rgba(20, 23, 26, 0.12);
  --c-line-soft:    rgba(20, 23, 26, 0.07);
  --c-line-invert:  rgba(243, 241, 238, 0.16);
  --c-line-invert-soft: rgba(243, 241, 238, 0.09);

  /* ---------- Typography: families ---------- */
  --ff-display: "Noto Serif TC", "Songti TC", "Source Han Serif TC",
                "PingFang TC", Georgia, "Times New Roman", serif;
  --ff-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
             "PingFang TC", "Microsoft JhengHei", "Noto Sans TC",
             "Helvetica Neue", Arial, sans-serif;
  --ff-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  /* ---------- Typography: fluid scale ---------- */
  /* floor lowered so the hero headline never orphans a single glyph at 375px */
  --fs-display: clamp(2.125rem, 1.05rem + 4.6vw, 5rem);
  --fs-h1:      clamp(2.1rem, 1.35rem + 3.0vw, 3.75rem);
  --fs-h2:      clamp(1.75rem, 1.25rem + 2.0vw, 2.75rem);
  --fs-h3:      clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  --fs-lead:    clamp(1.0625rem, 0.98rem + 0.42vw, 1.3125rem);
  --fs-body:    clamp(0.9688rem, 0.94rem + 0.16vw, 1.0625rem);
  --fs-small:   0.875rem;
  --fs-meta:    0.75rem;

  /* ---------- Typography: rhythm ---------- */
  --lh-display: 1.22;
  --lh-heading: 1.34;
  --lh-body:    1.95;   /* generous — Traditional Chinese reads better open */
  --ls-display: 0.005em;
  --ls-body:    0.02em;
  --ls-meta:    0.22em;

  /* ---------- Space scale ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --sp-11: 10rem;

  /* ---------- Section rhythm (the breath) ---------- */
  --section-y:       clamp(6rem, 3.2rem + 9vw, 12.5rem);
  --section-y-tight: clamp(4rem, 2.4rem + 5.5vw, 7.5rem);
  --section-y-vast:  clamp(8rem, 4rem + 13vw, 17rem);

  /* ---------- Grid ---------- */
  --grid-max: 1300px;
  --grid-narrow: 760px;
  --grid-gutter: clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
  --grid-cols: 12;
  --grid-gap: clamp(1.25rem, 0.8rem + 1.8vw, 2.5rem);

  /* ---------- Radius ---------- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* ---------- Elevation (whisper-quiet only) ---------- */
  --sh-1: 0 1px 2px rgba(20, 23, 26, 0.04);
  --sh-2: 0 8px 30px -18px rgba(20, 23, 26, 0.22);
  --sh-3: 0 24px 70px -34px rgba(20, 23, 26, 0.30);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-base: 360ms;
  --dur-slow: 720ms;
  --dur-reveal: 1150ms;

  /* ---------- Layers ---------- */
  --z-header: 100;
  --z-menu: 90;
  --z-top: 200;

  /* ---------- Header ---------- */
  --header-h: 72px;
}

@media (min-width: 900px) {
  :root { --header-h: 88px; }
}