/* ============================================================
   RED EMPIRE — Colors, Type, Spacing, Motion
   The single source of truth. Import this everywhere.
   ============================================================ */

/* --- Webfonts (Google) -----------------------------------------
   ⚠️ Substitution flag: the wordmark in the supplied logo appears
   to use a custom or licensed Trajan-family serif. Cinzel is the
   closest free pairing. Drop a licensed .ttf into ./fonts/ and
   redefine --font-display to use it. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');

:root {
  /* ----- COLOR -------------------------------------------------- */
  /* Blood (the brand) */
  --blood:        #8B0F12;
  --blood-deep:   #5C0608;   /* hover/press for blood */
  --blood-ink:    #2C0608;   /* darkest blood, for backgrounds */
  --ember:        #C42B1C;   /* signal red — live, recording, badges */
  --gold:         #C9A559;   /* rare editorial accent — awards, marquee */

  /* Ash (warm darks) */
  --ink-black:    #0A0606;   /* primary dark surface */
  --ash-900:      #1A1414;   /* card surface on dark */
  --ash-800:      #221B1B;
  --ash-700:      #2E2626;   /* hairline borders on dark */
  --ash-500:      #6B5F5F;   /* muted text on dark */
  --ash-300:      #A89C9C;   /* secondary text on dark */

  /* Bone (warm lights) */
  --bone:         #F5EFE6;   /* primary light surface */
  --bone-300:     #E8DFD2;   /* card surface on light */
  --bone-500:     #C9BDA9;   /* hairline / muted on light */
  --bone-700:     #8C8273;   /* secondary text on light */

  /* Semantic */
  --bg:           var(--ink-black);
  --bg-alt:       var(--ash-900);
  --surface:      var(--ash-900);
  --surface-alt:  var(--ash-800);
  --border:       var(--ash-700);
  --border-strong: var(--ash-500);
  --fg:           var(--bone);
  --fg-muted:     var(--ash-300);
  --fg-quiet:     var(--ash-500);
  --accent:       var(--blood);
  --accent-hover: var(--blood-deep);
  --signal:       var(--ember);
  --link:         var(--bone);
  --focus-ring:   var(--blood);

  /* Light-mode counterparts (apply via [data-theme="light"]) */
  --bg-light:           var(--bone);
  --surface-light:      var(--bone-300);
  --border-light:       var(--bone-500);
  --fg-light:           var(--ink-black);
  --fg-muted-light:     var(--bone-700);

  /* ----- TYPE --------------------------------------------------- */
  --font-display:   'Cinzel', 'Trajan Pro', 'Cormorant Garamond', Georgia, serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:      'JetBrains Mono', 'Berkeley Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* Size ramp */
  --text-display: 6.0rem;     /* 96px — hero title cards */
  --text-h1:      3.75rem;    /* 60px — page openers */
  --text-h2:      2.5rem;     /* 40px — section headers */
  --text-h3:      1.5rem;     /* 24px — card titles */
  --text-h4:      1.125rem;   /* 18px — eyebrow / lead */
  --text-body:    1.0625rem;  /* 17px */
  --text-small:   0.875rem;   /* 14px */
  --text-micro:   0.75rem;    /* 12px — slate metadata */

  /* Tracking */
  --track-tight:    -0.01em;
  --track-normal:    0;
  --track-wide:      0.06em;   /* caps display default */
  --track-wider:     0.12em;   /* mono caps, eyebrows */
  --track-widest:    0.24em;   /* slate metadata */

  /* Leading */
  --leading-tight:   1.04;     /* display */
  --leading-snug:    1.18;     /* h1/h2 */
  --leading-normal:  1.5;      /* body */
  --leading-loose:   1.7;      /* longform / captions */

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* ----- SPACING (8-pt) ---------------------------------------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 192px;

  /* ----- RADII ------------------------------------------------- */
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  8px;     /* used sparingly — modals only */
  --radius-pill: 9999px; /* not used in marketing/UI; reserved for tags inside player UI */

  /* ----- BORDERS ----------------------------------------------- */
  --border-hairline: 1px solid var(--border);
  --border-bone:     1px solid var(--bone-500);
  --border-strong-rule: 1px solid var(--border-strong);
  --border-blood:    1px solid var(--blood);

  /* ----- SHADOWS ----------------------------------------------- */
  --shadow-card:    0 1px 0 rgba(0,0,0,.25), 0 12px 32px -8px rgba(0,0,0,.45);
  --shadow-marquee: 0 30px 80px -20px rgba(139,15,18,.45);
  --shadow-pop:     0 24px 60px -12px rgba(0,0,0,.65);
  --shadow-focus:   0 0 0 2px rgba(139,15,18,.5);

  /* ----- MOTION ------------------------------------------------ */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-cine: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:   cubic-bezier(0.55, 0, 1, 0.45);

  --dur-fast:  160ms;
  --dur-base:  320ms;
  --dur-slow:  640ms;
  --dur-epic:  1200ms;

  /* ----- LAYOUT ------------------------------------------------ */
  --container-max: 1440px;
  --container-pad: clamp(24px, 4vw, 64px);
  --grid-gutter:   24px;
  --nav-height:    72px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Reset-ish baseline + the canonical look of each element.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Headings --------------------------------------------------
   Display caps with wide tracking. Sentence case is OK but the
   brand default for h1/h2 is ALL CAPS. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-5) 0;
  color: var(--fg);
}

h1, .h1 {
  font-size: var(--text-h1);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  line-height: var(--leading-tight);
}
h2, .h2 {
  font-size: var(--text-h2);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}
h3, .h3 {
  font-size: var(--text-h3);
  letter-spacing: var(--track-normal);
}
h4, .h4 {
  font-size: var(--text-h4);
  letter-spacing: var(--track-normal);
}

.display, .hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, var(--text-display));
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  margin: 0;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-widest);
  color: var(--ember);
}

.slate {                       /* metadata strip: 2024 · FEATURE · 92 MIN */
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  color: var(--fg-muted);
}

p, .body {
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  text-wrap: pretty;
  margin: 0 0 var(--space-5) 0;
}

.lead {
  font-size: 1.25rem;
  line-height: var(--leading-loose);
  color: var(--fg);
  max-width: 60ch;
}

.small  { font-size: var(--text-small); }
.micro  { font-size: var(--text-micro); }

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.94em;
}

a {
  color: var(--link);
  text-decoration: none;
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--ember); }

/* Link with underline-reveal */
.link-reveal {
  display: inline-block;
  position: relative;
}
.link-reveal::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}
.link-reveal:hover::after { transform: scaleX(1); }

::selection { background: var(--blood); color: var(--bone); }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-7) 0;
}

/* --- Buttons --------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 48px;
  padding: 0 var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  user-select: none;
  white-space: nowrap;
}
.btn-blood {
  background: var(--blood);
  color: var(--bone);
}
.btn-blood:hover  { background: var(--blood-deep); transform: translateY(-1px); }
.btn-blood:active { transform: scale(0.98); }

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--border-strong);
}
.btn-ghost:hover  { border-color: var(--bone); background: rgba(245,239,230,0.04); }
.btn-ghost:active { transform: scale(0.98); }

.btn-sm { height: 36px; padding: 0 var(--space-4); font-size: var(--text-micro); }
.btn-lg { height: 56px; padding: 0 var(--space-7); }

/* --- Tags / chips ---------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  background: transparent;
}
.tag-blood { color: var(--bone); border-color: var(--blood); background: var(--blood); }
.tag-ember { color: var(--ember); border-color: var(--ember); }

/* --- Form inputs ----------------------------------------------- */
.input {
  height: 48px;
  width: 100%;
  padding: 0 var(--space-4);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-body);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--fg-quiet); }
.input:focus {
  outline: none;
  border-color: var(--blood);
  box-shadow: var(--shadow-focus);
}

/* --- Cards ----------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* --- Utility — grain overlay ----------------------------------- */
.grain {
  position: relative;
  isolation: isolate;
}
.grain::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url('../assets/grain.png');
  background-size: 256px 256px;
  opacity: .04;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 2;
}

/* --- Utility — image vignette --------------------------------- */
.vignette {
  position: relative;
  isolation: isolate;
}
.vignette::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(10,6,6,.55) 100%),
    linear-gradient(to top, rgba(10,6,6,.85) 0%, rgba(10,6,6,0) 50%);
  pointer-events: none;
  z-index: 1;
}