/* 3rd Eye Guyz — design tokens
   Implements brand.md. Import this before any page styles.
   Fonts: add to <head> —
   <link href="https://fonts.googleapis.com/css2?family=Jost:wght@500;700;800&family=Space+Grotesk:wght@400;500&family=IBM+Plex+Mono:wght@400&display=swap" rel="stylesheet">
*/

:root {
  /* palette */
  --ink: #03213B;          /* Void Ink — the ground, always */
  --gold: #E6A533;         /* Signal Gold — primary accent, CTAs */
  --gold-hi: #EAC761;      /* hover states, fine detail */
  --orange: #DA5C1A;       /* Blast Orange — energy, emphasis */
  --magenta: #B42A58;      /* Psychic Magenta — sparingly */
  --suit-blue: #0A6A90;    /* supporting, deliberately plain */
  --teal: #2E9E8F;         /* Wave Teal — waveforms, secondary deco */
  --iris-red: #C0392B;     /* third-eye iris ONLY */

  /* semantic */
  --bg: var(--ink);
  --text: #F4E9D4;         /* warm paper-cream on ink, not pure white */
  --text-muted: #9DB3C4;
  --accent: var(--gold);
  --accent-hover: var(--gold-hi);
  --link: var(--gold);
  --rule: rgba(230, 165, 51, 0.25);

  /* sub-brand overrides: set data-brand on <body> */
  /* [data-brand="tilt-wizard"]  → accent: orange   */
  /* [data-brand="lady-eye"]     → accent: magenta  */

  /* type */
  --font-display: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --track-display: 0.08em;   /* pulp-paperback tracking for all-caps display */

  /* scale */
  --size-hero: clamp(2.5rem, 7vw, 5rem);
  --size-h2: clamp(1.5rem, 3.5vw, 2.25rem);
  --size-body: 1.0625rem;
  --size-small: 0.875rem;

  /* layout */
  --radius: 6px;
  --measure: 38rem;          /* max line length for body copy */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 4rem;
}

[data-brand="tilt-wizard"] {
  --accent: var(--orange);
  --accent-hover: var(--gold);
}

[data-brand="lady-eye"] {
  --accent: var(--magenta);
  --accent-hover: var(--suit-blue);
}

/* base */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: 1.1;
}

/* waveform divider — the approved section separator */
.wave-rule {
  height: 12px;
  background: none;
  border: none;
  --wave: var(--teal);
  background-image:
    linear-gradient(90deg, transparent 0, transparent 100%);
  position: relative;
}
.wave-rule::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg,
      var(--wave) 0 2px, transparent 2px 6px);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M0 6 L8 6 10 2 12 10 14 4 16 8 18 6 30 6 32 3 34 9 36 6 60 6 62 1 64 11 66 6 90 6 92 4 94 8 96 6 120 6' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x;
  mask-size: 120px 12px;
}

/* CTA */
.btn {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  background: var(--accent);
  color: var(--ink);
  border: none;
  border-radius: var(--radius);
  padding: 0.75rem 1.5rem;
  cursor: pointer;
}
.btn:hover { background: var(--accent-hover); }