/* ============================================================
   DRAKHARON — Design System Foundations
   Heavy metal épico · fantasía oscura · estética cinematográfica
   ============================================================ */

@font-face {
  font-family: 'Cinzel';
  src: url('fonts/Cinzel-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Crimson Pro';
  src: url('fonts/CrimsonPro-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Crimson Pro';
  src: url('fonts/CrimsonPro-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- COLOR · raw tokens ---------- */
  --bg:            #080808; /* page background — near black */
  --surface:       #111111; /* raised panels / cards */
  --surface-warm:  #1C1A18; /* warm stone surface, alt panels */

  --text-primary:  #E8E4D8; /* bone / parchment white */
  --text-muted:    #8A8070; /* aged muted text */

  --gold:          #C8A84B; /* accent — use sparingly */
  --silver:        #B8B4A8; /* secondary metal accent */

  --border:        #2A2520; /* general 1px borders */
  --border-gold:   #C8A84B; /* gold accent borders */

  /* ---------- COLOR · semantic aliases ---------- */
  --fg1: var(--text-primary);
  --fg2: var(--text-muted);
  --accent: var(--gold);
  --accent-2: var(--silver);
  --hairline: var(--border);
  --on-gold: #080808; /* text/icon color when placed on gold fill */

  /* ---------- TYPE · families ---------- */
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif; /* headings, nav, UI, buttons */
  --font-body:    'Crimson Pro', 'Georgia', serif;        /* body, lore, bios */

  /* ---------- TYPE · weights ---------- */
  --w-body:    400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   900;

  /* ---------- TYPE · tracking (Cinzel always wide) ---------- */
  --track-display: 0.12em;  /* minimum for Cinzel headings */
  --track-wide:    0.22em;  /* eyebrows, nav, small caps UI */
  --track-mega:    0.35em;  /* hero kicker / ornamental labels */

  /* ---------- SPACING scale (8px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* ---------- GEOMETRY ---------- */
  --radius: 0;          /* ZERO on everything — medieval, no exceptions */
  --border-w: 1px;      /* borders are always 1px */
  --shadow: none;       /* no box-shadows, ever */

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur:  280ms;        /* slow, deliberate fades — no bounce */
}

/* ============================================================
   BASE ELEMENT STYLES
   ============================================================ */

body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.85;
  font-weight: var(--w-body);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Headings (Cinzel, uppercase, tracked) ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  color: var(--fg1);
  line-height: 1.15;
  margin: 0;
}

h1 { font-size: 64px; font-weight: var(--w-black); letter-spacing: 0.14em; }
h2 { font-size: 40px; }
h3 { font-size: 26px; letter-spacing: 0.16em; }
h4 { font-size: 19px; letter-spacing: var(--track-wide); }

/* Eyebrow / small-caps label */
.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  font-size: 13px;
  color: var(--gold);
}

/* ---------- Body / lore ---------- */
p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.85;
  color: var(--fg1);
  margin: 0 0 1.2em;
  text-wrap: pretty;
}
.lore { color: var(--fg1); font-style: italic; }
.muted { color: var(--fg2); }

a { color: var(--gold); text-decoration: none; }

/* ============================================================
   COMPONENT PRIMITIVES
   ============================================================ */

/* ---------- Button ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  font-size: 13px;
  padding: 14px 30px;
  background: transparent;
  color: var(--gold);
  border: var(--border-w) solid var(--gold);
  border-radius: 0;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { background: var(--gold); color: var(--on-gold); }

/* Secondary / ghost (silver) */
.btn--ghost { color: var(--silver); border-color: var(--border); }
.btn--ghost:hover { background: var(--silver); color: var(--on-gold); border-color: var(--silver); }

/* ---------- Card / panel ---------- */
.panel {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: 0;
}
.panel--warm { background: var(--surface-warm); }

/* ---------- Decorative divider (fades at edges) ---------- */
.divider {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg,
    transparent 0%, var(--gold) 50%, transparent 100%);
  opacity: 0.6;
}

/* ---------- Ornament (✦ above section headings) ---------- */
.ornament {
  color: var(--gold);
  font-size: 18px;
  line-height: 1;
  display: block;
  margin-bottom: var(--space-3);
}