/* =========================================================
   tokens.css — design tokens (the single source of truth)

   Structure follows Groundwork (spacing, shape, type scale, motion);
   the colour and font slots are filled with the Skeps brand.
   Change a value here and every component that uses it updates.
   ========================================================= */

:root {
  /* ---- Colour (Groundwork slots → Skeps) ---- */
  --bg:           #050507;  /* surface: page ground                                  */
  --surface:      #0E0E11;  /* surface-raised: cards, hover fill                     */
  --border:       #27272A;  /* line: decorative hairlines only                       */
  --line-control: #3F3F46;  /* edges of buttons and chips                            */
  --text:         #F4F4F5;  /* ink: headings, labels                      18.6:1     */
  --text-2:       #D4D4D8;  /* ink, softer: quote text                    13.9:1     */
  --muted:        #A1A1AA;  /* ink-muted: bio, captions, counts            7.9:1     */
  --dim:          #71717A;  /* decorative only (4.3:1) — never for text you must read */
  --accent:       #67E8F9;  /* accent: selected states, links, the cursor 14.4:1     */
  --accent-soft:  rgba(103, 232, 249, .12); /* selected chip background              */
  --accent-2:     #22D3EE;  /* glow only                                              */

  /* ---- Type (display = Sora, labels = IBM Plex Mono) ---- */
  --font-sans: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --text-h3:      clamp(1.4rem, 2.2vw, 1.85rem); /* the name */
  --text-body:    1rem;      /* 16px */
  --text-body-sm: .9375rem;  /* 15px */
  --text-caption: .875rem;   /* 14px — nothing smaller (Groundwork floor) */

  /* ---- Spacing: 4px grid, token number × 4 ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 28px;  --space-8: 32px;
  --space-10: 40px; --space-11: 44px; --space-12: 48px; --space-14: 56px;

  /* ---- Shape ---- */
  --radius:         14px;   /* radius-lg: cards */
  --radius-md:      10px;   /* image frames (album covers) */
  --radius-pill:    999px;  /* everything you press */
  --border-control: 1.5px;

  /* ---- Size ---- */
  --link-height: 56px;      /* link buttons (≥ button-h 48px) */
  --chip-h:      40px;
  --tap-min:     40px;
  --hub-width:   440px;

  /* ---- Motion (Groundwork: quick and quiet) ---- */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);  /* ease-out */
  --fast: 150ms;                           /* colour and border changes */
  --base: 200ms;                           /* arrows */
}