/* WEEKENDER Design System — canonical tokens (shipped verbatim from
   design_handoff_weekender_design_system/tokens/*.css). Do not tweak values
   here; this file is the brand source of truth. Fonts load from the HTML
   head (Google Fonts: Bebas Neue + IBM Plex Mono — approved substitution). */

:root {
  /* ---- Base palette ---- */
  --neon-magenta: #FF0080;   /* Primary — CTAs, accents, glow */
  --electric-cyan: #00FFFF;  /* Secondary — links, labels, borders */
  --void-black: #000000;     /* Background, primary canvas */
  --grid-purple: #000010;    /* Section backgrounds */
  --neon-white: #F0F0FF;     /* Headlines, body */
  --dim-grid: #1A0033;       /* Subtle purple backgrounds */

  /* ---- Surfaces ---- */
  --surface: #0D0010;        /* Card background */
  --surface-alt: #1A1A1A;    /* Alt surface / raised chrome */
  --surface-portfolio: #0A0010;
  --surface-disabled: #2A2A2A;

  /* ---- Text ---- */
  --text-primary: #FFFFFF;
  --text-body: #F0F0FF;
  --text-muted: #7A7A7A;     /* Placeholders, captions, dim mono */
  --text-disabled: #757575;

  /* ---- Borders ---- */
  --border-cyan: #00FFFF;
  --border-magenta: #FF0080;
  --border-magenta-soft: #FF008055;  /* Service-card border */
  --border-ghost: #FFFFFF40;         /* Ghost button outline */
  --border-disabled: #3A3A3A;

  /* ---- Glow / effect colors ---- */
  --glow-magenta: #FF008044;   /* Service-card ambient glow */
  --glow-magenta-hover: #FF008055;

  /* ---- Semantic aliases ---- */
  --bg-page: var(--void-black);
  --bg-section: var(--grid-purple);
  --bg-card: var(--surface);
  --color-accent: var(--neon-magenta);
  --color-link: var(--electric-cyan);
  --color-heading: var(--text-primary);

  /* ---- Families ---- */
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Type scale (display face) ---- */
  --fs-display: 96px;   /* letter-spacing 2px */
  --fs-h1: 72px;        /* letter-spacing 1.5px */
  --fs-h2: 48px;        /* letter-spacing 1px */
  --fs-h3: 32px;        /* letter-spacing 0.5px */

  /* ---- Type scale (mono face) ---- */
  --fs-body: 16px;      /* line-height 24px */
  --fs-caption: 12px;   /* line-height 16px */
  --fs-label: 12px;     /* UI labels, all-caps */

  /* ---- Weights ---- */
  --fw-mono-light: 300;
  --fw-mono-regular: 400;
  --fw-mono-medium: 500;
  --fw-mono-bold: 700;

  /* ---- Tracking (letter-spacing) ---- */
  --tracking-display: 0.02em;   /* ~ +200 at display size */
  --tracking-label: 0.24em;     /* UI labels — very wide, +400 */
  --tracking-pill: 1.5px;
  --tracking-body: 0;

  /* ---- Line heights ---- */
  --lh-display: 0.95;
  --lh-heading: 1;
  --lh-body: 1.5;
  --lh-caption: 1.33;

  /* ---- Spacing scale ---- */
  --space-xs: 4px;    /* Micro */
  --space-s: 8px;     /* Tiny */
  --space-m: 16px;    /* Small */
  --space-l: 24px;    /* Base — gutter */
  --space-xl: 48px;   /* Large — component spacing */
  --space-2xl: 80px;  /* Extra Large */
  --space-3xl: 120px; /* Huge — section padding */

  /* ---- Layout ---- */
  --grid-max: 1140px;
  --grid-columns: 12;
  --grid-gutter: 24px;
  --section-padding-y: 120px;
  --component-gap: 48px;

  /* ---- Radii ---- */
  --radius-control: 8px;   /* Buttons, inputs, tags-square */
  --radius-card: 12px;     /* Cards */
  --radius-pill: 18px;     /* Pills / tags */
  --radius-round: 50%;     /* Icon buttons */

  /* ---- Chrome heights ---- */
  --nav-height: 72px;
  --nav-height-mobile: 64px;
  --control-height: 56px;  /* Inputs, submit */
  --pill-height: 36px;
  --icon-button-size: 48px;
  --logo-height: 24px;

  /* ---- Glows / shadows ---- */
  --glow-card: 0 0 20px var(--glow-magenta);
  --glow-card-hover: 0 0 30px var(--glow-magenta-hover);
  --glow-inner-primary: inset 0 0 12px rgba(255, 255, 255, 0.25);
  --glow-text-magenta: 0 0 12px rgba(255, 0, 128, 0.5);
  --glow-text-cyan: 0 0 10px rgba(0, 255, 255, 0.45);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: ease;
  --dur-hover: 150ms;
  --dur-entrance: 300ms;
  --dur-transition: 200ms;
  --marquee-duration: 60s;

  /* ---- Texture overlay opacities ---- */
  --overlay-vhs: 0.10;
  --overlay-scanlines: 0.10;
  --overlay-grid: 0.08;
}

/* Signature entrance: fade up + fade in, 300ms ease-out */
@keyframes wk-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Constant-speed marquee */
@keyframes wk-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Scanline sweep for hero chrome */
@keyframes wk-scanline {
  from { background-position-y: 0; }
  to   { background-position-y: 100%; }
}

/* Audio-pill equalizer bars */
@keyframes wk-eq {
  from { height: 4px; }
  to   { height: 14px; }
}