/* ============================================================
   El Codex Esencial — Foundations
   17th-century Dutch manuscript aesthetic
   ============================================================ */

@font-face {
  font-family: "Georgia";
  src: url("fonts/georgia.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Georgia";
  src: url("fonts/georgiab.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Georgia";
  src: url("fonts/georgiai.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Georgia";
  src: url("fonts/georgiaz.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Color: raw palette ---------- */
  --ink-void:        #0A0604;        /* deepest black, vellum shadow */
  --ink-charcoal:    #150E08;        /* primary background */
  --ink-umber:       #2A1D10;        /* raised surface / panels */
  --ink-sepia:       #3D2A18;        /* card border / hairline */

  --gold-amber:      #C8922A;        /* primary metallic */
  --gold-deep:       #8B6310;        /* secondary, struck gold */
  --gold-glint:      #E8C878;        /* light gold — display text */
  --gold-leaf:       #B8851F;        /* mid leaf */
  --gold-tarnish:    #6B4A0E;        /* aged gild */

  --crimson-deep:    #7A1515;        /* accent, illuminated capitals */
  --crimson-blood:   #4A0808;        /* accent shadow */
  --crimson-vermil:  #A02020;        /* accent highlight */

  --parchment:       #D4B896;        /* body text on dark */
  --parchment-soft:  #B89A78;        /* muted body */
  --parchment-faint: #7A6850;        /* faint / disabled */

  /* ---------- Color: semantic ---------- */
  --bg:              var(--ink-charcoal);
  --bg-raised:       var(--ink-umber);
  --bg-deep:         var(--ink-void);

  --fg:              var(--parchment);          /* body */
  --fg-display:      var(--gold-glint);         /* headings, display */
  --fg-muted:        var(--parchment-soft);
  --fg-faint:        var(--parchment-faint);

  --primary:         var(--gold-amber);
  --primary-hover:   var(--gold-glint);
  --primary-press:   var(--gold-deep);
  --on-primary:      var(--ink-charcoal);

  --accent:          var(--crimson-deep);
  --accent-hover:    var(--crimson-vermil);
  --accent-press:    var(--crimson-blood);

  --border:          var(--ink-sepia);
  --border-strong:   var(--gold-tarnish);
  --border-gilt:     var(--gold-amber);
  --rule:            rgba(200, 146, 42, 0.22);  /* hairline gilt */

  --link:            var(--gold-glint);
  --link-hover:      var(--gold-amber);

  /* ---------- Typography ---------- */
  --serif: Georgia, "Times New Roman", "Hoefler Text", serif;
  --serif-display: Georgia, "Times New Roman", "Hoefler Text", serif;

  /* Type scale — chiaroscuro: very large display, very still body */
  --t-display:       clamp(48px, 7vw, 96px);
  --t-h1:            clamp(36px, 4.5vw, 60px);
  --t-h2:            clamp(28px, 3.2vw, 42px);
  --t-h3:            22px;
  --t-h4:            18px;
  --t-body:          17px;
  --t-small:         14px;
  --t-caption:       12px;
  --t-overline:      11px;

  /* Line-heights */
  --lh-display:      1.04;
  --lh-h:            1.15;
  --lh-body:         1.65;
  --lh-tight:        1.3;

  /* Letter-spacing */
  --ls-display:      0.04em;     /* slightly wide */
  --ls-h:            0.025em;
  --ls-body:         0.005em;
  --ls-overline:     0.32em;     /* engraved spacing */
  --ls-button:       0.18em;

  /* Weights — Georgia: 400 / 700 only */
  --w-regular: 400;
  --w-bold:    700;

  /* ---------- Spacing ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- Radii — almost none, manuscript pages are square ---------- */
  --r-0: 0;
  --r-1: 1px;
  --r-2: 2px;
  --r-3: 4px;
  --r-pill: 999px;

  /* ---------- Shadows: chiaroscuro, single deep light source ---------- */
  --shadow-sm:  0 1px 0 rgba(0,0,0,0.6);
  --shadow-md:  0 6px 18px rgba(0,0,0,0.55), 0 1px 0 rgba(232,200,120,0.05) inset;
  --shadow-lg:  0 18px 40px rgba(0,0,0,0.7), 0 1px 0 rgba(232,200,120,0.06) inset;
  --shadow-xl:  0 30px 80px rgba(0,0,0,0.8), 0 1px 0 rgba(232,200,120,0.08) inset;

  /* Inner gild glow — used on buttons and cards */
  --glow-gild:  inset 0 1px 0 rgba(232,200,120,0.18), inset 0 -1px 0 rgba(0,0,0,0.5);
  --glow-ember: 0 0 24px rgba(122,21,21,0.45);

  /* ---------- Motion — slow, candle-flicker only ---------- */
  --ease-quill:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-ember:    cubic-bezier(0.65, 0, 0.35, 1);
  --dur-quick:     180ms;
  --dur-base:      280ms;
  --dur-slow:      560ms;
}

/* ============================================================
   Element defaults
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif-display);
  color: var(--fg-display);
  font-weight: var(--w-regular); /* display roman, not bold */
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); line-height: var(--lh-h); letter-spacing: var(--ls-display); }
h2 { font-size: var(--t-h2); line-height: var(--lh-h); letter-spacing: var(--ls-h); }
h3 { font-size: var(--t-h3); line-height: var(--lh-tight); letter-spacing: var(--ls-h); font-style: italic; }
h4 { font-size: var(--t-h4); line-height: var(--lh-tight); letter-spacing: var(--ls-h); }

.display {
  font-family: var(--serif-display);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-display);
  text-wrap: balance;
}

.overline {
  font-family: var(--serif);
  font-size: var(--t-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--gold-amber);
}

.caption {
  font-size: var(--t-caption);
  color: var(--fg-muted);
  font-style: italic;
}

.lede {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.55;
  color: var(--fg-display);
  font-style: italic;
}

p { margin: 0 0 1em; max-width: 68ch; }
p + p { text-indent: 1.5em; margin-top: -0.6em; } /* manuscript indent */

a { color: var(--link); text-decoration: none; border-bottom: 1px solid var(--rule); }
a:hover { color: var(--link-hover); border-bottom-color: var(--gold-amber); }

hr {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--gold-tarnish) 20%,
    var(--gold-amber) 50%,
    var(--gold-tarnish) 80%,
    transparent 100%
  );
  margin: var(--s-7) 0;
}

::selection { background: var(--crimson-deep); color: var(--gold-glint); }