/* ==========================================================================
   Ridgeline Orthopedics — Design Tokens
   Palette + wordmark type sourced from Assets/RL-BrandGuide.svg.
   Spatial + typographic mechanics measured from the client's reference site.
   See docs/design-thesis.md for the derivation of every number here.
   ========================================================================== */

/* --- Typefaces -----------------------------------------------------------
   Cairo .......... SIL OFL. Self-hosting is unrestricted.
   Acumin Pro ..... Adobe. Supplied by the client as desktop OTF and converted
                    here as instructed. If the client holds no Acumin *web*
                    licence, replace these two @font-face blocks with an Adobe
                    Fonts web kit <link> — nothing else in the build changes.
   All four are subset to Latin and hinted-stripped: 73 KB total.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Cairo';
  src: url('/assets/fonts/cairo-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('/assets/fonts/cairo-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Acumin Pro';
  src: url('/assets/fonts/acumin-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Acumin Pro';
  src: url('/assets/fonts/acumin-400i.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* --- Colour: brand-sourced, no invented hues ------------------------- */
  --navy:        #2b2b60;   /* brand primary — guide swatch 1 */
  --sky:         #8eadca;   /* brand secondary — guide swatch 2 */
  --sage:        #97987d;   /* brand tertiary — guide swatch 3 */
  --ink:         #272525;   /* guide rule + caption colour */

  /* Rooms. The page is a sequence of these, never one white scroll. */
  --paper:       #f4f5f1;   /* cool stone ground — sage desaturated */
  --paper-warm:  #fafaf7;   /* raised surfaces inside a paper room */
  --deep:        #15152f;   /* dark room — navy driven near-black */
  --deep-soft:   #1e1e3f;   /* raised surface inside a dark room */
  --sky-tint:    #e6edf4;   /* the third room — sky at ~12% */

  /* Sage is the brand's mountain colour, but at 11px on paper it measures
     2.70:1 — below AA. `--sage-ink` is the same hue driven dark enough for
     small text (4.64:1); plain `--sage` stays for decorative marks only. */
  --sage-ink:    #6f7057;

  /* Type colours. Every value below is measured against the room it sits in;
     see tools/audit.mjs, which fails the build if any pair drops under AA. */
  --fg:          var(--navy);
  --fg-muted:    rgba(43, 43, 96, 0.72);   /* 5.16:1 on paper, 5.00:1 on sky-tint */
  --fg-faint:    rgba(43, 43, 96, 0.70);   /* 4.87:1 on paper — small print still passes */
  --on-deep:         #eceef2;
  --on-deep-muted:   rgba(236, 238, 242, 0.72);
  --on-deep-faint:   rgba(236, 238, 242, 0.62);

  /* Hairlines — this build draws with rules, not boxes and shadows. */
  --rule:        rgba(43, 43, 96, 0.16);
  --rule-strong: rgba(43, 43, 96, 0.34);
  --rule-deep:       rgba(236, 238, 242, 0.20);
  --rule-deep-strong: rgba(236, 238, 242, 0.42);

  /* --- Type families ---------------------------------------------------- */
  --font-display: 'Cairo', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Acumin Pro', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;

  /* --- Display scale ----------------------------------------------------
     Measured mechanics: light weight, uppercase, ~-0.055em tracking,
     leading below 1. Cairo's humanist skeleton survives the negative
     tracking where a geometric sans would jam shut.
     ---------------------------------------------------------------------- */
  --d1: clamp(2.75rem, 7.4vw, 6.5rem);    /* hero */
  --d2: clamp(2.25rem, 5.4vw, 4.5rem);    /* section heads */
  --d3: clamp(1.75rem, 3.4vw, 2.75rem);   /* sub-heads */
  --d4: clamp(1.25rem, 2vw, 1.6rem);      /* card / row heads */

  --track-display: -0.055em;
  --track-d3: -0.035em;
  --leading-display: 0.92;

  /* Micro-label: the brand guide's own `.2em` tracking, not a borrowed mono */
  --label: 0.6875rem;        /* 11px — matches the reference's micro-label */
  --track-label: 0.2em;

  /* Body */
  --body:    1.0625rem;      /* 17px */
  --body-sm: 0.9375rem;      /* 15px */
  --lead:    1.55;           /* looser than the reference: this copy explains surgery */

  /* --- Space: 8px base, ratio-stepped ----------------------------------- */
  --s1: 0.5rem;  --s2: 1rem;   --s3: 1.5rem;  --s4: 2rem;
  --s5: 3rem;    --s6: 4rem;   --s7: 6rem;    --s8: 8rem;
  --section-y: clamp(4.5rem, 9vw, 9rem);
  --gutter:    clamp(1.25rem, 4vw, 4rem);
  --maxw:      82.5rem;   /* 1320px */
  --maxw-text: 40rem;
  --nav-h:     5.75rem;   /* measured header height (92px) — reserved on pages
                            without a full-bleed hero, since the header is fixed */

  /* --- Craft: measured from the reference ------------------------------- */
  --radius: 2px;        /* buttons + chips. Not pills. */
  --radius-media: 8px;  /* media only */
  --hair: 1px;

  /* --- Motion: one personality, "settle" -------------------------------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 600ms;
  --dur-fast: 260ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; --dur-fast: 1ms; }
}