/* ==========================================================================
   Sam Gidwani: design tokens
   Mirrors the shape of a BrandSpec token set. Colour, type and spacing only.
   Everything else belongs in styles.css.
   ========================================================================== */

:root {

  /* ---- Colour -----------------------------------------------------------
     The plum/periwinkle identity is carried over from the existing site and
     tightened. Plum is the brand surface, periwinkle the bright accent that
     only ever sits on it. Periwinkle fails contrast on white (2.6:1), so a
     darker violet does the accent work on light surfaces.               */

  --plum:        #402a4f;   /* primary brand surface                       */
  --plum-deep:   #291935;   /* deepest surface, footer                     */
  --plum-soft:   #4e3560;   /* raised surface on plum                      */

  --peri:        #949cd7;   /* accent ON PLUM ONLY, 4.8:1 on --plum       */
  --peri-bright: #b3b9e4;   /* hover state on plum                         */
  --violet:      #5b4b8a;   /* accent on light surfaces, 7.4:1 on paper   */
  --violet-deep: #453a6b;   /* hover on light                              */

  --ink:         #241830;   /* body copy                     16.3:1 paper  */
  --ink-muted:   #5d5468;   /* secondary copy                 7.0:1 paper  */
  --ink-faint:   #6f667c;   /* captions, meta      5.3:1 paper, 5.0:1 tint */

  --paper:       #ffffff;
  --paper-tint:  #f7f5fa;   /* alternating section ground                  */
  --lilac:       #ece9f6;   /* tinted panels, chips                        */
  --line:        #e3dfec;   /* hairlines on paper                          */
  --line-plum:   #5a4569;   /* hairlines on plum                           */

  /* On-plum text */
  --on-plum:       #ffffff;             /* 12.6:1                          */
  --on-plum-muted: #cfc7db;             /*  7.4:1                          */

  --focus: #949cd7;

  /* ---- Type -------------------------------------------------------------
     Lato throughout, which is what the practice already runs on. One family,
     working by weight and size rather than by mixing faces. Lato opens up at
     display sizes, so headings are set at 700 and pulled in hard on tracking
     and leading; that tightness is what does the work here.              */

  --font-display: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* 12-step fluid scale, 320 → 1440.
     The bottom of the scale runs larger than a default web scale: this
     practice's patients skew older, so nothing sits below 14px and body copy
     starts at 18. Raising it here raises it everywhere, since no component
     sets its own size. */
  /* --step--3 is for nav chrome only, never for reading copy. */
  --step--3: clamp(0.75rem,  0.732rem + 0.09vw, 0.8125rem);
  --step--2: clamp(0.875rem, 0.857rem + 0.09vw, 0.9375rem);
  --step--1: clamp(1rem,     0.982rem + 0.09vw, 1.0625rem);
  --step-0:  clamp(1.125rem, 1.107rem + 0.09vw, 1.1875rem);
  --step-1:  clamp(1.1875rem,1.152rem + 0.18vw, 1.3125rem);
  --step-2:  clamp(1.25rem,  1.196rem + 0.27vw, 1.4375rem);
  --step-3:  clamp(1.25rem,  1.179rem + 0.36vw, 1.5rem);
  --step-4:  clamp(1.375rem, 1.232rem + 0.71vw, 1.875rem);
  --step-5:  clamp(1.375rem, 1.125rem + 1.25vw, 2.25rem);
  --step-6:  clamp(1.5625rem,1.223rem + 1.70vw, 2.75rem);
  --step-7:  clamp(1.8125rem,1.331rem + 2.41vw, 3.5rem);
  --step-8:  clamp(2.125rem, 1.518rem + 3.04vw, 4.25rem);
  --step-9:  clamp(2.5rem,   1.714rem + 3.93vw, 5.25rem);

  --lh-display: 0.98;
  --lh-heading: 1.06;
  --lh-body: 1.65;
  --lh-tight: 1.3;

  /* Lato opens up at display sizes, so it needs pulling in hard. */
  --track-display: -0.04em;
  --track-heading: -0.025em;
  --track-eyebrow: 0.14em;

  /* ---- Space: 10-step fluid scale -------------------------------------- */
  --space-1:  clamp(0.25rem, 0.24rem + 0.09vw, 0.375rem);
  --space-2:  clamp(0.5rem,  0.48rem + 0.09vw, 0.625rem);
  --space-3:  clamp(0.75rem, 0.71rem + 0.18vw, 1rem);
  --space-4:  clamp(1rem,    0.93rem + 0.36vw, 1.5rem);
  --space-5:  clamp(1.5rem,  1.39rem + 0.54vw, 2rem);
  --space-6:  clamp(2rem,    1.79rem + 1.07vw, 3rem);
  --space-7:  clamp(2.5rem,  2.07rem + 2.14vw, 5rem);
  --space-8:  clamp(3.5rem,  2.86rem + 3.21vw, 7rem);
  --space-9:  clamp(4.5rem,  3.57rem + 4.64vw, 9.5rem);
  --space-10: clamp(6rem,    4.93rem + 5.36vw, 12rem);

  /* ---- Structure -------------------------------------------------------- */
  --maxw: 1280px;
  /* Reading measure is independent of the container: widening the page must not
     widen a line of body copy. */
  --maxw-prose: 68ch;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);

  /* Near-square. Cards, panels and images all share this one radius; only
     buttons and chips are pills. */
  --radius: 3px;
  --radius-sm: 2px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgb(36 24 48 / 0.04), 0 12px 32px -12px rgb(36 24 48 / 0.16);
  --shadow-lift: 0 2px 4px rgb(36 24 48 / 0.05), 0 22px 48px -16px rgb(36 24 48 / 0.22);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --dur-press: 120ms;
  --dur-hover: 180ms;
  --dur-panel: 240ms;
  /* A full-width sheet crossing the whole screen needs longer than a dropdown,
     or it reads as a cut rather than a movement. */
  --dur-drawer: 340ms;
  --dur-reveal: 620ms;
}