/* ================================================================
   HAMTIV — Design Tokens v2
   Deep black · Crimson · Gold — Premium Entertainment Brand
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&family=Josefin+Sans:wght@300;400;600;700&display=swap');

:root {
  /* ── Core Brand ─────────────────────────────────────── */
  --void:          #0a0a09;   /* canvas bg — deepest black */
  --ink:           #0d0b10;   /* site background */
  --surface:       #120e18;   /* section bg */
  --surface-2:     #1a1225;   /* card surface */
  --surface-3:     #221830;   /* elevated card */

  --crimson:       #C42348;
  --crimson-deep:  #8B1632;
  --crimson-glow:  rgba(196,35,72,0.35);
  --crimson-dim:   rgba(196,35,72,0.12);

  --gold:          #F4A31A;   /* matches canvas animation */
  --gold-soft:     #D4A24C;
  --gold-light:    #FFD060;
  --gold-pale:     #f0dfa0;
  --gold-glow:     rgba(244,163,26,0.3);
  --gold-dim:      rgba(244,163,26,0.1);

  /* ── Text ───────────────────────────────────────────── */
  --text-100:      #F4EEF8;
  --text-60:       rgba(244,238,248,0.60);
  --text-35:       rgba(244,238,248,0.35);
  --text-15:       rgba(244,238,248,0.15);

  /* ── Borders ────────────────────────────────────────── */
  --border:        rgba(255,255,255,0.07);
  --border-gold:   rgba(244,163,26,0.25);
  --border-glass:  rgba(255,255,255,0.10);

  /* ── Typography ─────────────────────────────────────── */
  --font-serif:    'Cormorant Garamond', Georgia, serif;
  --font-ui:       'Josefin Sans', 'Century Gothic', sans-serif;
  --font-body:     'DM Sans', 'Helvetica Neue', sans-serif;

  /* ── Layout ─────────────────────────────────────────── */
  --max:           1140px;
  --gutter:        clamp(1.25rem, 5vw, 2.5rem);

  /* ── Radii ──────────────────────────────────────────── */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  32px;
  --r-pill:999px;

  /* ── Shadows ────────────────────────────────────────── */
  --shadow-card:      0 8px 40px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-glow-c:    0 0 40px rgba(196,35,72,0.4), 0 0 80px rgba(196,35,72,0.15);
  --shadow-glow-g:    0 0 40px rgba(244,163,26,0.35), 0 0 80px rgba(244,163,26,0.12);
  --shadow-3d:        0 40px 80px rgba(0,0,0,0.7), 0 12px 30px rgba(0,0,0,0.5);

  /* ── Easing ─────────────────────────────────────────── */
  --ease:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Transitions ────────────────────────────────────── */
  --t:             all 0.4s var(--ease);

  /* ── 3D ─────────────────────────────────────────────── */
  --perspective:   900px;
}