/* ============================================================
   SHINE HARDER TATTOOS — DESIGN TOKENS (ported verbatim from
   the Claude Design handoff). Source of truth for the 2026 theme.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Newsreader:ital,opsz,wght@0,6..72,400;1,6..72,400&display=swap');

:root {
  /* Brand hazards */
  --mint: #3cffd0;
  --ultraviolet: #5200ff;
  --ultraviolet-90: rgba(82, 0, 255, 0.9);
  /* Accent / state */
  --mint-border: #309875;
  --link-hover: #3860be;
  --focus-cyan: #1eaedb;
  --purple-rule: #3d00bf;
  /* Story-tile fills */
  --tile-mint: #3cffd0;
  --tile-purple: #5200ff;
  --tile-yellow: #ffe600;
  --tile-pink: #ff5ca2;
  --tile-orange: #ff6b2c;
  --tile-blue: #2f6bff;
  --tile-white: #ffffff;
  /* Surfaces */
  --canvas: #131313;
  --surface-slate: #2d2d2d;
  --image-frame: #313131;
  --hazard-white: #ffffff;
  --absolute-black: #000000;
  /* Text */
  --text-primary: #ffffff;
  --text-secondary: #949494;
  --text-muted: #e9e9e9;
  --text-inverted: #131313;
  /* States / rings */
  --press-gray: #8c8c8c;
  --ring-quiet: rgba(0, 0, 0, 0.33);
  --ring-hover: #c2c2c2;
  --overlay: rgba(255, 255, 255, 0.2);
  /* Families */
  --font-display: 'Anton', 'Impact', Helvetica, sans-serif;
  --font-sans: 'Space Grotesk', Helvetica, Arial, sans-serif;
  --font-mono: 'Space Mono', 'Courier New', Courier, monospace;
  --font-serif: 'Newsreader', Georgia, serif;
  /* Letter-spacing */
  --ls-caps-tight: 1.1px;
  --ls-caps: 1.5px;
  --ls-caps-wide: 1.9px;
  --ls-tag: 0.72px;
  /* Spacing */
  --sp-8: 8px; --sp-12: 12px; --sp-14: 14px; --sp-16: 16px; --sp-20: 20px;
  --sp-24: 24px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-64: 64px;
  --max-width: 1300px;
  /* Radius */
  --r-input: 2px; --r-image: 3px; --r-nested: 4px; --r-tag: 20px;
  --r-card: 20px; --r-feature: 24px; --r-promo: 30px; --r-cta: 40px; --r-round: 50%;
  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 150ms;
  --dur-base: 180ms;
}