/* ═══════════════════════════════════════════════════════════════════
   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);
}

/* ═══════════════════════════════════════════════════════════════════
   Default profile picture

   Applied as a CSS default on every avatar class, so an account with no
   uploaded photo shows the shared artwork automatically — no per-page
   JavaScript branch required. Pages that DO set an uploaded photo
   override background-image inline, and an inline style always wins over
   a stylesheet, so real photos are unaffected.

   This exists because the JS approach only covered the handful of call
   sites that happened to call gradientFor(). Avatars in follower lists,
   search results, the navbar, challenge entries and the mod centre had
   no default branch at all and simply rendered blank.

   The per-user hue is applied by JS where a user id is known; without it
   the artwork still shows in its base colour, which is a far better
   failure than a white circle.
   ═══════════════════════════════════════════════════════════════════ */
.post-avatar,
.user-list-avatar,
.ta-avatar,
.avatar,
.profile-avatar,
.nav-avatar,
.case-avatar,
.sub-avatar-placeholder,
.settings-avatar {
  background-image: url('/assets/images/SKSCDefaultPfp.png');
  background-size: 115%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
}

/* An <img> avatar carries its own pixels; a background underneath would
   only show through transparent areas and tint the picture. */
img.sub-avatar,
img.case-avatar,
.post-avatar img,
.settings-avatar img {
  background-image: none;
}