/* ══════════════════════════════════════════════════════════════════════
   CHRONICLES ROLEPLAY — shared brand layer
   Loaded by both the public site and The Ledger, so the two stay one
   family. Gold values are sampled from the logo artwork itself
   (logo.png), not eyeballed: the wordmark is a champagne-to-bronze
   metallic gradient, softer and warmer than a saturated amber.
   ══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Hapna';
  src: url('../fonts/Hapna-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'RDRLino';
  src: url('../fonts/RDRLino-Regular.ttf') format('truetype');
  font-display: swap;
}

:root {
  /* ── Gold, straight off the logo ── */
  --gold-hi:    #F8F0D0;   /* champagne highlight along the top of a letter */
  --gold:       #E8D8B8;   /* the body of the wordmark */
  --gold-mid:   #D8C8A8;
  --gold-deep:  #C0A888;   /* where the bevel turns over */
  --bronze:     #705840;   /* cast shadow */
  --bronze-dk:  #604830;   /* outline */

  /* ── Ground: warm near-black, the lamplit brown of the hero ── */
  --ground:     #100C09;
  --ground-2:   #17110C;
  --panel:      #1E1710;
  --panel-2:    #261E15;
  --panel-3:    #30261B;

  --line:       #6b5a4440;
  --line-soft:  #6b5a4420;

  /* ── Text ── */
  --white:      #EFEAE1;
  --tan:        #cbb8a0;
  --soft:       #b7a488;
  --grey:       #91877A;

  /* ── State. Kept separate from the brand gold so a warning never
        reads as decoration. ── */
  --red:        #C0463C;
  --red-bright: #D9584C;
  --green:      #8FAE63;
  --amber:      #D9A441;
  --red-bg:     rgba(192, 70, 60, .14);
  --green-bg:   rgba(143, 174, 99, .13);
  --gold-bg:    rgba(232, 216, 184, .10);

  --shadow:     0 2px 6px rgba(0,0,0,.55), 0 24px 64px -32px rgba(0,0,0,.95);

  --display:    'RDRLino', Georgia, serif;
  --body:       'Hapna', Georgia, serif;
  --mono:       ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
}

* { box-sizing: border-box; }

/* The UA stylesheet implements [hidden] as display:none, which any author
   `display` declaration silently beats — so a panel styled `display:grid`
   stays on screen with the attribute set. Everything here that toggles
   visibility uses `hidden`, so make it authoritative. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background-color: var(--ground);
  color: var(--white);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

code, .mono { font-family: var(--mono); }
button { font-family: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* The metallic fill used on the wordmark, reusable for display text.
   Falls back to flat gold anywhere background-clip:text is unsupported. */
.metal {
  color: var(--gold);
  background: linear-gradient(180deg,
    var(--gold-hi) 0%, var(--gold) 38%, var(--gold-deep) 72%, var(--bronze) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
  .metal { color: var(--gold); -webkit-text-fill-color: currentColor; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* The seal artwork (icon.png from the repo, recoloured to the brand gold
   for dark grounds). Raster at 96px, so never render it above ~48px. */
.seal { display: block; flex: none; width: auto; height: auto; max-width: 100%; }