/* ============================================================
   Last Sovereign — NEW WEBSITE design tokens
   Derived from: New Website/new UI/Psds/*.psd (9 PSDs, all 1920x1080)
                 + New Website/new UI/mockup/*.jpeg  (sampled)
   This file is the single source of truth for the new site's
   colors, type and spacing. Every new page imports it.
   ============================================================ */

/* ---------- Fonts (self-hosted from New Website/new UI/Fonts) ---------- */
@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/Cinzel-Regular.otf') format('opentype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/Cinzel-Bold.otf') format('opentype');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Cinzel Decorative';
  src: url('../fonts/CinzelDecorative-Bold.otf') format('opentype');
  font-weight: 700; font-display: swap;
}
/* Montserrat — nav labels + form fields. Variable, weights 100-900.
   Added 2026-09-29 from Google Fonts (google/fonts, OFL). */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat.ttf') format('truetype-variations');
  font-weight: 100 900; font-display: swap;
}
/* Variable font: covers 300-700 in one file */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 700; font-display: swap;
}

:root {
  /* ---------- Canvas ---------- */
  --design-w: 1920px;          /* PSD canvas width  */
  --design-h: 1080px;          /* PSD canvas height */
  --header-h: 107px;           /* header bar, from 1 Page.psd Rectangle 1 */
  --footer-h: 58px;            /* shared footer, injected by site.js */

  /* ---------- Surfaces (sampled from mockups) ---------- */
  --bg-deep:      #050D18;     /* page background, dominant */
  --bg-deep-alt:  #020F17;     /* lobby/realm background */
  --panel:        #0B161C;     /* panel + input fill */
  --panel-alt:    #081319;     /* panel, lighter pass */
  --panel-veil:   rgba(6, 15, 24, 0.82);  /* panel over hero art */

  /* ---------- Gold ramp ---------- */
  --gold-bright:  #FFF8B3;     /* logo highlight */
  --gold-border:  #FFE699;     /* ornate frame / button border */
  --gold-pale:    #E3CF9A;     /* eyebrow small-caps */
  --gold:         #E5B03C;     /* primary heading gold */
  --gold-link:    #ECC980;     /* links: "Forget Password?" */
  --gold-dim:     #9E8354;     /* inactive nav / hairlines */

  /* ---------- Red CTA (vertical gradient + gold edge) ---------- */
  --red-top:      #6B0D05;
  --red-mid:      #5D0000;
  --red-bot:      #300500;
  --cta-gradient: linear-gradient(180deg, var(--red-top) 0%, var(--red-mid) 55%, var(--red-bot) 100%);

  /* ---------- Text ---------- */
  --text:         #E1E4E9;     /* body copy, off-white */
  --text-dim:     #A9B2BC;
  --text-on-cta:  #FFF3EE;

  /* ---------- Type stacks ---------- */
  --font-display: 'Cinzel', 'Cinzel Decorative', Georgia, serif;
  --font-body:    'Cormorant Garamond', Georgia, serif;
  --font-ui:      'Montserrat', 'Segoe UI', system-ui, sans-serif;

  /* ---------- Rhythm ---------- */
  --rule-gold: 1px solid var(--gold-dim);
  --frame-gold: 2px solid var(--gold-border);
  --radius: 4px;
}

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

html, body {
  margin: 0; padding: 0;
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100%;
}