/* public/assets/css/global.css */

/* ── Design tokens ── */
:root {
  --gold:       #ffca28;
  --gold-dim:   #2a2000;
  --bg:         #050505;
  --bg-card:    #080808;
  --bg-hover:   #0a0a0a;
  --border:     #0d0d0d;
  --border-mid: #1a1a1a;
  /* Contrast-checked against #050505 bg: text-1 ≈ 7.3:1 (AAA), text-2 ≈ 4.8:1 (AA), text-3 ≈ 3.9:1 (decorative/large only) */
  --text-0:     #ffffff;
  --text-1:     #9a9a9a;
  --text-2:     #7d7d7d;
  --text-3:     #6e6e6e;
  --text-4:     #222222;
  --text-ghost: #111111;
  /* Semantic aliases used by light-theme overrides */
  --text:       #ffffff;
  --text-muted: #7d7d7d;
  --font:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);

  /* ── Type scale (content pages; story/index heroes are exempt art) ──
     2xs: uppercase micro-labels, tags, kickers, periods
     xs:  meta lines, captions, nav links
     sm:  summaries, descriptions, secondary body
     base: body prose
     md:  lead paragraphs, card titles
     lg:  h3 / section headings / CTA headings
     xl:  sub-heroes, stat numbers
     2xl: page titles
     hero: name headers on recruiter/full */
  --fs-2xs:  0.72rem;
  --fs-xs:   0.8rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.35rem;
  --fs-xl:   1.8rem;
  --fs-2xl:  2.4rem;
  --fs-hero: clamp(2.4rem, 5vw, 3.4rem);

  /* ── Layout ── */
  --shell-max: 1200px;
  --shell-pad: 48px 56px 96px;
  --shell-pad-md: 32px 24px 64px;   /* ≤768px */
  --shell-pad-sm: 24px 16px 48px;   /* ≤480px */

  /* ── Label conventions ──
     kicker: var(--fs-2xs), letter-spacing 3px, uppercase, gold
     section label: var(--fs-2xs), letter-spacing 3px, uppercase, text-2 */
}

/* ── Light theme overrides ── */
/* Only document/content pages get these via [data-theme="light"].
   Dark is the default and remains pixel-identical (vars resolve to same hex). */
:root[data-theme="light"] {
  --bg:         #fafaf8;
  --bg-card:    #ffffff;
  --bg-hover:   #f4f4f2;
  --border:     #e4e4e0;
  --border-mid: #d0d0cc;
  --text-0:     #111111;
  --text-1:     #333333;
  --text-2:     #4a4a4a;
  --text-3:     #5e5e5e;
  --text-4:     #6a6a6a;
  --text-ghost: #888888;
  --text:       #111111;
  --text-muted: #4a4a4a;
  /* Gold is overridden for light mode — bright #ffca28 is illegible on white */
  --gold:       #a97c0a;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
  background: var(--bg);
  color: var(--text-0);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
}
img { display: block; max-width: 100%; }
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* ── Typography ── */
.display {
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.heading-1 { font-size: clamp(2rem, 5vw, 4rem); font-weight: 900; letter-spacing: -0.03em; }
.heading-2 { font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 800; }
.label {
  font-size: var(--fs-2xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-ghost);
}
.label-sm {
  font-size: var(--fs-2xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* ── Gold accent ── */
.g { color: var(--gold); }

/* ── Structural border ── */
.border-t { border-top: 1px solid var(--border); }
.border-b { border-bottom: 1px solid var(--border); }
.border-l { border-left: 1px solid var(--border); }
.border-r { border-right: 1px solid var(--border); }

/* ── Wand cursor ── */
.wand-shell { cursor: none; }

#wand-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: translate(7px, 26px);
  opacity: 0;
  transition: opacity .2s;
}
.wand-body {
  position: relative;
  width: 28px; height: 6px;
  transform: rotate(40deg);
  transform-origin: right center;
}
.wand-stick {
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 2px;
  background: linear-gradient(to left, #fff8dc, #8B6914);
  border-radius: 1px;
}
.wand-handle {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  background: #5a3e1b; border-radius: 1px;
}
.wand-tip {
  position: absolute; left: -2px; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 4px;
  background: var(--gold); border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(255,202,40,.9), 0 0 12px 4px rgba(255,202,40,.4);
}
.wand-star {
  position: absolute; left: -10px; top: 50%;
  transform: translate(-50%, -50%);
  color: var(--gold); font-size: 14px;
  text-shadow: 0 0 8px rgba(255,202,40,.9);
  animation: starPulse 1.5s ease-in-out infinite;
  line-height: 1;
}

#mouse-glow {
  position: fixed;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,202,40,.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .3s;
}

.sparkle {
  position: fixed; pointer-events: none; z-index: 9997;
  color: var(--gold);
  animation: sparkleUp .9s ease-out forwards;
  line-height: 1;
}

/* ── Scanline effect ── */
.scanlines::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,.03) 2px,
    rgba(0,0,0,.03) 4px
  );
  pointer-events: none; z-index: 1;
}

/* ── Reveal utilities ── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-x {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.reveal-x.visible { opacity: 1; transform: translateX(0); }

/* ── Scroll-stagger reveal ──
   Pages opt in: a head script adds .js-anim to <html> (skipped when
   prefers-reduced-motion), reveal-lite.js flips .in as elements enter view.
   No JS / reduced motion → content just stays visible. */
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }
  .js-anim [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .65s var(--ease-out) var(--rd, 0s), transform .65s var(--ease-out) var(--rd, 0s);
  }
  .js-anim [data-reveal].in { opacity: 1; transform: none; }
}