/* GAB VISUAL tokens. Every colour, font, size, space and timing on the site lives here.
   Change a value here and the whole site moves. Source: owner's DESIGN DNA. */
:root {
  /* colour: core */
  --canvas: #110e14;          /* oklch(0.17 0.014 305) */
  --ink: #f0edf4;             /* oklch(0.95 0.010 305) */
  --plum: #451d5a;            /* oklch(0.32 0.11 312) booking band, closing band, footer, Book header */
  --plum-hi: #5b3372;         /* oklch(0.40 0.11 312) highlight edge on raised controls in plum only. Never text on it. */
  --accent: #c294ea;          /* oklch(0.74 0.13 308) primary buttons, active filter, links */
  --on-accent: #110e14;

  /* colour: neutral ramp, hue 305 */
  --grid-line: #201e24;
  --border-deco: #343138;
  --surface-subtle: #1a171d;
  --surface-lifted: #232027;
  --muted: #a6a3ab;           /* muted text on canvas only, control borders */
  --focus: #d1abf5;
  --error: #ed756e;

  /* type */
  --font-display: 'Big Shoulders', 'Big Shoulders Display', sans-serif; /* 300, 800 */
  --font-body: 'Red Hat Mono', monospace;                             /* 400, 600 */
  --fs--1: 0.75rem;   /* 12 frame numbers, the floor */
  --fs-0: 1rem;       /* 16 body, labels */
  --fs-1: 1.333rem;   /* 21 H3 */
  --fs-2: 1.777rem;   /* 28 H2 and step numbers on phones; service names */
  --fs-3: 2.369rem;   /* 38 H2 and step numbers on desktop */
  --fs-4: 3.157rem;   /* 50 not used since v5 */
  --fs-5: 4.209rem;   /* 67 not used since v5 */
  --fs-lead: 1.125rem;  /* lead on desktop (v5: scale down one step) */
  --fs-hero: clamp(2.5rem, 1.6rem + 4vmin, 4rem);  /* 40px on a 360px phone, 62px at 1440x900, cap 64px */
  --lh-display: 1;
  --lh-lead: 1.5;
  --lh-body: 1.6;
  --track-display: 0.01em;
  --track-hero: -0.015em;   /* sentence-case hero only: lets "and timeless." hold one line in 4 columns */
  --track-label: 0.06em;
  --track-frame: 0.04em;
  --measure: 60ch;

  /* space: 4-based, deliberately uneven */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;

  /* grid */
  --cols: 4; --gutter: 16px; --margin: 16px;

  /* shape: not uniform on purpose */
  --r-btn: 4px; --r-chip: 6px; --r-deck: 10px; --r-grip: 12px;

  /* depth: raised controls on plum (header deck, footer deck, phone grip) */
  --raise: -2px -2px 4px var(--plum-hi), 3px 3px 6px var(--canvas);
  --press: inset 2px 2px 4px var(--canvas), inset -2px -2px 4px var(--plum-hi);

  /* motion: one easing, four durations */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-feedback: 120ms;
  --t-state: 220ms;
  --t-layout: 320ms;
  --t-entrance: 520ms;

  /* targets */
  --tap: 44px;
  --grip-h: 88px;
  --deck-h: 80px;
}
@media (min-width: 900px) {
  :root { --cols: 12; --gutter: 24px; --margin: 64px; --deck-h: 112px; }
}