/* ─────────────────────────────────────────────────────────────
   Beldi — Design Tokens
   Dark Editorial palette + shared type, motion & shadow tokens.
   Reference these via var(--token); never hard-code colors below.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Colour ─────────────────────────────────────────────── */
  --bg:            #14110D;
  --band-bg:       #1A1612;
  --surface:       #1E1A14;
  --hero-backdrop: #211C15;
  --specimen-bg:   #221D16;

  --fg:            #F2EDE3; /* primary text */
  --muted:         #9A8F7F; /* secondary body */
  --micro-fg:      #D6CBB6; /* sub-14px / WCAG AAA on bg */
  --line:          rgba(242, 237, 227, 0.14);
  --line-strong:   rgba(242, 237, 227, 0.34);

  --terracotta:    #D89172;
  --gold:          #D4AE6B;
  --bone:          #F9F6F0; /* light specimen cards */
  --ink:           #1A1A1A; /* text on bone */

  --button-bg:     #F2EDE3;
  --button-fg:     #1A1A1A;

  --positive:      #5BA47A;
  --warning:       #D4AE6B;
  --danger:        #C0392B;

  /* ── Type ───────────────────────────────────────────────── */
  --font-serif:    'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Motion ─────────────────────────────────────────────── */
  --ease:          cubic-bezier(.2, .7, .2, 1);
  --t-fast:        180ms;
  --t-base:        300ms;
  --t-slow:        500ms;

  /* ── Elevation ──────────────────────────────────────────── */
  --shadow-card:        0 1px 2px rgba(0, 0, 0, 0.4),  0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-card-hover:  0 2px 4px rgba(0, 0, 0, 0.5),  0 28px 60px rgba(0, 0, 0, 0.55);
  --shadow-specimen:    0 1px 2px rgba(0, 0, 0, 0.4),  0 12px 36px rgba(0, 0, 0, 0.5);
  --shadow-toast:       0 14px 36px rgba(0, 0, 0, 0.45);

  /* ── Layout ─────────────────────────────────────────────── */
  --gutter:        64px;
  --gutter-tight:  40px;
  --gutter-loose:  96px;
  --max-w:         1440px;
}

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