/* CROWNSHIFT – Designsystem (Materialhierarchie: Stein · Eisen · Bronze · Gold · Eiche · Pergament) */
@font-face {
  font-family: "Cinzel";
  src: url("../fonts/cinzel-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  src: url("../fonts/cinzel-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  src: url("../fonts/cinzel-latin-900-normal.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("../fonts/alegreya-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("../fonts/alegreya-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("../fonts/alegreya-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Stein (primär) */
  --slate-950: #0c0d0f;
  --slate-900: #131417;
  --slate-850: #181a1d;
  --slate-800: #1e2024;
  --slate-700: #2a2d32;
  --stone: #3b3e44;
  --stone-light: #5a5e66;
  /* Eisen (sekundär) */
  --iron-dark: #2e3238;
  --iron: #565c64;
  --iron-light: #8a9099;
  /* Bronze (Interaktion) */
  --bronze-900: #3b2612;
  --bronze-700: #5f3d1c;
  --bronze: #8f5f2c;
  --bronze-light: #b9824a;
  --brass: #c49a4c;
  /* Gold (Belohnung) */
  --gold-dim: #9c7a35;
  --gold: #d2ac56;
  --gold-bright: #f0d48c;
  /* Eiche (Hintergrund) */
  --oak-950: #140c07;
  --oak-900: #1f140c;
  --oak-800: #2c1c10;
  --oak-700: #3f2817;
  --oak-500: #6a4528;
  /* Pergament (Information) */
  --parchment: #e8dcc0;
  --parchment-dark: #c9b68f;
  --ink: #2a1f16;
  --ink-soft: #5a4632;
  /* Licht */
  --candle: #ffc970;
  --candle-soft: rgba(255, 190, 100, 0.18);
  /* Häuser */
  --p0: #8e1f2f; /* Burgunderrot */
  --p0-bright: #c8384d;
  --p0-glow: rgba(214, 64, 84, 0.55);
  --p1: #1f4fa3; /* Königsblau */
  --p1-bright: #4a82e6;
  --p1-glow: rgba(80, 140, 240, 0.55);
  /* Text */
  --text: #ece3d0;
  --text-soft: #b8ab92;
  --text-dim: #857a68;
  --danger: #c8443a;
  --ok: #5f9e6a;

  --font-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --font-body: "Alegreya", "Georgia", serif;

  --radius-s: 6px;
  --radius: 10px;
  --shadow-deep: 0 10px 30px rgba(0, 0, 0, 0.6);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-heavy: cubic-bezier(0.7, 0, 0.2, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --ui-scale: 1;
}

/* Barrierefreiheit (Spec §76) */
html.large-ui {
  --ui-scale: 1.15;
}
html.high-contrast {
  --text: #ffffff;
  --text-soft: #e6dcc8;
  --text-dim: #cfc3ab;
  --stone: #4a4e55;
  --p0-bright: #ff5a70;
  --p1-bright: #6aa6ff;
}
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) *,
  html:not(.force-motion) *::before,
  html:not(.force-motion) *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}