/*!
 * TimeTales · world-wizard.css
 * WizardRP: Kerzenlicht, Manuskript, Nacht. Aktiv mit <html data-world="wizard">.
 * Nur Token-Überschreibungen und der Welt-Look gemeinsamer Bausteine. Seitenlayouts gehören
 * in page-<seite>.css.
 *
 * Schrift: Cormorant Garamond (dieselbe Schrift wie im Ingame-Ladebildschirm) für alle
 * Überschriften, Gewicht 500 bis 600. Betonung über <em> in echter Kursive.
 * Die Schrift läuft klein: --display-scale gleicht das für alle .tt-display/.tt-h* aus.
 * Zusatz-Token: --ember (Glut) für einzelne warme Lichtakzente in Seiten-CSS.
 */

html[data-world="wizard"] {
  /* Flächen: Nachtblau mit einem Hauch Wärme */
  --ink-0: #07080d;
  --ink-1: #0c0e16;
  --ink-2: #131622;
  --ink-3: #1d2130;

  /* Linien: Pergamentton statt Reinweiß */
  --line: rgb(240 222 184 / .1);
  --line-strong: rgb(240 222 184 / .22);

  /* Text: Pergament */
  --text: #f3eee2;
  --text-2: #b9b2a3;
  --text-3: #8c8676;

  /* Akzent: Kerze, dazu Glut */
  --accent: #f2c66d;
  --accent-ink: #171004;
  --ember: #ff9a3c;

  /* Überschriften */
  --display-family: var(--font-serif);
  --display-weight: 500;
  --display-stretch: 100%;
  --display-tracking: -.012em;
  --display-leading: 1.05;
  --display-case: none;
  --display-scale: 1.18;
  --display-cap: 15.5vw;
  --display-pad: .1em;

  --heading-weight: 600;
  --heading-stretch: 100%;
  --heading-tracking: -.006em;
  --heading-leading: 1.1;

  --em-style: italic;

  /* Meta: Manrope in Kapitälchen-Optik */
  --meta-family: var(--font-body);
  --meta-weight: 650;
  --meta-size: .6875rem;
  --meta-tracking: .2em;
  --meta-case: uppercase;

  /* Buttons: gesperrte Versalien */
  --btn-family: var(--font-body);
  --btn-weight: 700;
  --btn-size: .75rem;
  --btn-tracking: .16em;
  --btn-case: uppercase;
}

/* Kursive Betonung bekommt die Kerzenfarbe und etwas mehr Gewicht, damit sie neben der
   Aufrechten nicht dünner wirkt. */
html[data-world="wizard"] :is(.tt-display, .tt-h1, .tt-h2, .tt-h3, .tt-h4) em {
  font-weight: calc(var(--heading-weight) - 50);
  letter-spacing: -.005em;
}

/* Weltname in der Leiste: kursiv, etwas größer */
html[data-world="wizard"] .tt-nav__world {
  font-style: italic;
  font-weight: 600;
  font-size: 1.3125rem;
  letter-spacing: 0;
  padding-bottom: .12em;
}

/* Buttons: feine Doppellinie wie die Rahmen im Ladebildschirm */
html[data-world="wizard"] .tt-btn:not(.tt-btn--text)::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  border-radius: 1px;
  pointer-events: none;
}

html[data-world="wizard"] .tt-btn--ghost {
  --btn-border: color-mix(in srgb, var(--accent) 55%, transparent);
  --btn-fill: var(--accent);
  --btn-fill-fg: var(--accent-ink);
}

html[data-world="wizard"] .tt-btn--sm {
  font-size: .6875rem;
}

html[data-world="wizard"] .tt-btn--lg {
  font-size: .8125rem;
}

html[data-world="wizard"] .tt-btn.is-disabled::after,
html[data-world="wizard"] .tt-btn[aria-disabled="true"]::after,
html[data-world="wizard"] .tt-btn:disabled::after {
  border-color: transparent;
}

/* Chips und Status: Sperrung etwas zurücknehmen, damit die Pillen kompakt bleiben */
html[data-world="wizard"] .tt-chip {
  letter-spacing: .14em;
  font-size: .65625rem;
}

html[data-world="wizard"] .tt-status {
  letter-spacing: .14em;
}

/* Haarlinie läuft an den Enden aus */
html[data-world="wizard"] .tt-rule {
  background: linear-gradient(90deg, transparent, var(--line-strong) 14%, var(--line-strong) 86%, transparent);
}

/* Fußzeile: zweite Zeile des Leitsatzes darf über <em> kursiv stehen */
html[data-world="wizard"] .tt-footer__claim em {
  font-style: italic;
  color: var(--accent);
}

/* Mobiles Menü: Serifen brauchen mehr Luft */
@media (max-width: 899.98px) {
  html[data-world="wizard"].js .tt-nav__link {
    font-size: clamp(2.5rem, 12.5vw, 4.5rem);
    line-height: 1.04;
  }

  html[data-world="wizard"].js .tt-nav__list > li {
    padding-block: .02em .1em;
  }
}