/* ─────────────────────────────────────────────
   Shifu Media Design Tokens
   Colour palette: deep midnight → violet → gold
───────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-0:        #020208;   /* deepest */
  --bg-1:        #05050f;   /* base */
  --bg-2:        #09091a;   /* elevated */
  --bg-3:        #0e0e22;   /* card */

  /* Text */
  --tx-1:        #e8e8f4;   /* primary */
  --tx-2:        #7070a0;   /* secondary */
  --tx-3:        #404060;   /* muted */

  /* Accent — violet */
  --ac:          #8b5cf6;   /* main */
  --ac-lt:       #a78bfa;   /* light */
  --ac-dk:       #6d28d9;   /* dark */
  --ac-glow:     rgba(139, 92, 246, 0.30);
  --ac-fill:     rgba(139, 92, 246, 0.10);
  --ac-border:   rgba(139, 92, 246, 0.28);

  /* Gold */
  --gd:          #d4a843;
  --gd-lt:       #f0c96a;
  --gd-glow:     rgba(212, 168, 67, 0.28);
  --gd-fill:     rgba(212, 168, 67, 0.08);

  /* Borders */
  --bd:          rgba(255, 255, 255, 0.06);
  --bd-lt:       rgba(255, 255, 255, 0.12);

  /* Radii */
  --r-s:   8px;
  --r-m:   14px;
  --r-l:   22px;
  --r-xl:  36px;
  --r-2xl: 56px;

  /* Spacing scale (8px base) */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  48px;
  --sp-6:  64px;
  --sp-7:  96px;
  --sp-8:  128px;

  /* Layout */
  --nav-h:    72px;
  --wrap:     1240px;
  --pad-x:    clamp(20px, 5vw, 64px);
  --sec-y:    clamp(48px, 6vw, 80px);

  /* Type */
  --f-head:  'Bodoni Moda', Georgia, serif;
  --f-body:  'Jost', system-ui, sans-serif;

  /* Motion */
  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg-0);
  color: var(--tx-1);
  font-family: var(--f-body);
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; }

/* ── Layout helpers ── */
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: var(--ac-dk); border-radius: 99px; }

/* ── Selection ── */
::selection { background: var(--ac-fill); color: var(--ac-lt); }

/* ── Focus ring ── */
:focus-visible { outline: 2px solid var(--ac-lt); outline-offset: 3px; }

/* ── Reduce motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}