/* ==================================================================
   Der Schulter Physio — design tokens

   The single source of truth for colour, type, rhythm and form.
   Enqueued globally, ahead of every other stylesheet, so each page
   bundle inherits the same palette instead of restating it.

   Add a page-specific stylesheet rather than redefining a token here.
   ================================================================== */

:root {
  /* colour */
  --bg:          #0F0F10;
  --surface:     #151517;
  --surface-2:   #1B1B1E;
  --line:        rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.20);

  --red:         #FF0019;   /* brand — display type, CTAs, accents only */
  --red-soft:    #FF7C88;   /* red for body-size text (passes contrast) */
  --red-deep:    #73000B;
  --red-glow:    rgba(255,0,25,.35);

  --green:       #22C55E;   /* availability status only — never decorative */
  --green-glow:  rgba(34,197,94,.35);

  --text:        #FFFFFF;
  --text-2:      #D4D6DA;
  --muted:       #9DA0A6;

  /* type */
  --f-display: 'Albert Sans', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, sans-serif;

  /* rhythm — one scale, used everywhere. Kills the old 200–900px gaps. */
  --section-y: clamp(56px, 6.4vw, 96px);
  --gap:       clamp(20px, 2.4vw, 32px);
  --shell:     1320px;
  --gutter:    clamp(20px, 5vw, 48px);

  /* form */
  --radius-sm: 12px;
  --radius:    20px;
  --radius-lg: 28px;
  --ease:      cubic-bezier(.22,.61,.36,1);
}