/* ═══════════════════════════════════════════════════════════════════
   SKETCH.SOCIAL — DESIGN TOKENS
   Single source of truth. Every page links this FIRST, before its own
   styles, so anything below can override intentionally but nothing has
   to invent its own values.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* ── The palette. Five colors. Nothing else is "a brand color". ──── */
  --c-white:  #FDFDFD;
  --c-black:  #010102;
  --c-pink:   #D48EDD;
  --c-purple: #9C71C9;
  --c-blue:   #4474C9;

  /* ── Semantic aliases ─────────────────────────────────────────────── */
  --accent:             var(--c-purple);
  --accent-light:       var(--c-pink);
  --color-accent:       var(--c-purple);
  --color-accent-hover: var(--c-blue);

  /* Greys are NOT separate colors — they are the palette black at
     reduced alpha, so everything stays inside the five-color system. */
  --color-line:      rgba(1, 1, 2, 0.12);
  --color-text-soft: rgba(1, 1, 2, 0.62);

  /* Functional states — deliberate exceptions to the palette. */
  --color-danger:  #e05a5a;
  --color-success: #2fa64a;

  /* ── Type. Two families: PunkKid for display, Syne for everything. ── */
  --font:         'Syne', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Syne', ui-sans-serif, system-ui, sans-serif;
  --font-header:  'Syne', ui-sans-serif, system-ui, sans-serif;
  --font-header-weight: 700;
  --font-d:       'PunkKid', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'PunkKid', ui-sans-serif, system-ui, sans-serif;

  /* ── Spacing scale ────────────────────────────────────────────────────
     Pick the nearest step instead of inventing a number. Audit found 110
     distinct padding pairs across the site purely because there was no
     scale here to reach for. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ── Corner radius ────────────────────────────────────────────────────
     Audit found 22 distinct radius values. Four steps plus a pill covers
     every real case on the site. */
  --radius-sm:   6px;   /* chips, small controls, inputs */
  --radius-md:  10px;   /* buttons, toggles */
  --radius-lg:  14px;   /* cards, panels */
  --radius-xl:  20px;   /* modals */
  --radius-pill: 999px;

  /* ── The "sketchy" look ───────────────────────────────────────────────
     Hard offset shadow + solid black border, no blur. Audit found 17
     distinct shadow offsets and 5 border widths; these are the three
     sizes that actually need to exist. */
  --border-thin:  2px;   /* default control border */
  --border-thick: 3px;   /* cards, modals, emphasis */

  --shadow-sm: 2px 2px 0 var(--c-black);   /* small controls */
  --shadow-md: 3px 3px 0 var(--c-black);   /* buttons */
  --shadow-lg: 4px 4px 0 var(--c-black);   /* hover / raised */
  --shadow-xl: 7px 9px 0 rgba(28, 34, 48, .85);  /* modal cards */

  /* Press-down interaction, so it's identical everywhere it's used. */
  --press-offset: translate(1px, 1px);
  --shadow-pressed: 1px 1px 0 var(--c-black);
}