/* Post Audio — design-tokens.css
   Visual direction: CINEMATIC WAVEFORM (locked with Murphy 2026-06-17, DH #392).
   Import first in every page: <link rel="stylesheet" href="/design-tokens.css">
   Palette harmonized with the embedded demo reel (/d/general-sfx) so it reads native. */

:root {
  /* palette — dark, cinematic, audio-forward */
  --pa-bg:        #0b0b0d;
  --pa-bg-2:      #0c0b09;   /* matches the reel canvas for seamless embed */
  --pa-surface:   #15151a;
  --pa-surface-2: #1e1e26;
  --pa-border:    #2a2a33;
  --pa-text:      #f2efe9;
  --pa-dim:       #9b9aa5;
  --pa-accent:        #e8b04b;   /* warm gold — primary CTA / brand */
  --pa-accent-warm:   #c8875f;   /* copper — ties to the reel player */
  --pa-accent-2:      #6c8cff;   /* sparing — links */
  --pa-good:      #6fcf97;
  --pa-bad:       #e06c6c;

  /* type */
  --pa-font-ui:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
  --pa-font-display: 'Georgia', 'Iowan Old Style', 'Times New Roman', serif;

  /* spacing / radius / shadow / motion */
  --pa-space:   16px;
  --pa-radius:  12px;
  --pa-radius-lg: 18px;
  --pa-shadow:  0 8px 30px rgba(0,0,0,0.45);
  --pa-shadow-accent: 0 8px 30px rgba(232,176,75,0.18);
  --pa-ease:    cubic-bezier(.2,.7,.2,1);
  --pa-maxw:    1100px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--pa-bg);
  color: var(--pa-text);
  font-family: var(--pa-font-ui);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: inherit; }

/* ---- primitives ---- */
.pa-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: var(--pa-radius);
  font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; line-height: 1;
  transition: transform .15s var(--pa-ease), background .15s var(--pa-ease), box-shadow .2s var(--pa-ease);
}
.pa-btn:hover { transform: translateY(-1px); }
.pa-btn:active { transform: translateY(0); }
.pa-btn-primary { background: var(--pa-accent); color: #1a1405; box-shadow: var(--pa-shadow-accent); }
.pa-btn-primary:hover { background: #f0bd61; }
.pa-btn-ghost   { background: transparent; border-color: var(--pa-border); color: var(--pa-text); }
.pa-btn-ghost:hover { border-color: var(--pa-accent); }
.pa-btn-lg { padding: 16px 30px; font-size: 16px; }

.pa-card {
  background: var(--pa-surface); border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-lg); padding: 28px; box-shadow: var(--pa-shadow);
}

.pa-eyebrow {
  text-transform: uppercase; letter-spacing: 2px; font-size: 12px;
  font-weight: 600; color: var(--pa-accent-warm);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}