/* ============================================================
   SPIKE DECK · DESIGN TOKENS · v1.0
   Theatre-tech visual system — painted deck, neon tape, sharpie.
   Import order:  tokens.css → textures.css → components.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Roboto+Mono:wght@400;500;600;700&family=Caveat:wght@400;500;600;700&family=Permanent+Marker&display=swap');

:root{
  /* ---- Surfaces ---------------------------------------------- */
  --sd-black:   #080808;
  --sd-ink:     #141414;
  --sd-paper:   #f4f1ea;
  --sd-paperHi: #fbf8f1;
  --sd-muted:   #6e6a62;
  --sd-rule:    #1e1e1e;

  /* ---- Accents (neon tape) ----------------------------------- */
  --sd-pink:    #ff2e88;
  --sd-green:   #b6ff3c;
  --sd-glow:    #d7ff5a;

  /* ---- Halos (always paired with --sd-glow) ------------------ */
  --sd-glow-halo: 0 0 8px rgba(215,255,90,.35),
                  0 0 18px rgba(215,255,90,.20);
  --sd-pink-halo: 0 0 6px rgba(255,46,136,.50);

  /* ---- Type stack -------------------------------------------- */
  --sd-font-display: 'Permanent Marker', cursive;
  --sd-font-hand:    'Caveat', cursive;
  --sd-font-mono:    'Roboto Mono', ui-monospace, monospace;
  --sd-font-body:    'Archivo', system-ui, sans-serif;

  /* ---- Type scale (size/line-height) ------------------------- */
  --sd-display-xl: 56px / .95;
  --sd-display-lg: 40px / 1;
  --sd-display-md: 32px / 1;
  --sd-hand-lg:    22px / 1.2;
  --sd-hand-md:    16px / 1.25;
  --sd-mono-chip:  11px / 1.3;
  --sd-mono-meta:  10px / 1.2;
  --sd-body:       15px / 1.55;

  /* ---- Letter spacing ---------------------------------------- */
  --sd-track-chip: 1.8px;
  --sd-track-meta: 1.6px;
  --sd-track-rail: 2px;
  --sd-track-stencil: 2.5px;

  /* ---- Tape geometry ----------------------------------------- */
  --sd-tape-clip: polygon(2% 10%, 98% 4%, 100% 92%, 0% 96%);
  --sd-tape-shadow:
    inset 0 -2px 4px rgba(0,0,0,.18),
    inset 0  2px 3px rgba(255,255,255,.35),
    0 1px 2px rgba(0,0,0,.4);
  --sd-tape-rotate: -2deg;

  /* ---- Surface accents --------------------------------------- */
  --sd-surface:     rgba(255,255,255,.03);
  --sd-surface-hi:  rgba(255,255,255,.05);
  --sd-border:      rgba(244,241,234,.08);
  --sd-border-hi:   rgba(244,241,234,.15);
  --sd-dashed:      rgba(244,241,234,.20);

  /* ---- Spacing (4-pt) ---------------------------------------- */
  --sd-1: 4px;  --sd-2: 8px;  --sd-3: 12px;
  --sd-4: 16px; --sd-5: 20px; --sd-6: 24px;
  --sd-7: 32px; --sd-8: 40px; --sd-9: 56px;
  --sd-10: 72px; --sd-11: 96px; --sd-12: 128px;

  /* ---- Layout ------------------------------------------------ */
  --sd-max-width: 1100px;
}

/* Quick utility classes for the families ----------------------- */
.sd-display{ font-family: var(--sd-font-display); }
.sd-hand   { font-family: var(--sd-font-hand);    }
.sd-mono   { font-family: var(--sd-font-mono);    text-transform: uppercase; letter-spacing: var(--sd-track-chip); }
.sd-body   { font-family: var(--sd-font-body);    }