/*
 * Tema medieval: tokens y base compartida por todas las páginas.
 * Se carga antes que main.css; css/skin.css (al final) aplica los componentes.
 */

:root {
  /* Piedra, hierro y madera */
  --ink: #0f0b08;
  --ash: #18120d;
  --stone: #241b14;
  --stone-hi: #3a2c20;
  --iron: #2c2a29;
  --iron-hi: #55504a;
  --wood: #3b2516;

  /* Pergamino */
  --parchment: #e9dcc0;
  --parchment-deep: #d4c19a;
  --sepia: #3b2a1a;
  --sepia-soft: #6b543a;

  /* Heráldica */
  --gold: #d9b45a;
  --gold-hi: #f3d58a;
  --gold-deep: #8a6420;
  --gold-soft: rgba(217, 180, 90, 0.45);
  --ember: #c8321f;
  --ember-deep: #7a1e16;
  --molten: #e8743a;
  --crimson: #8f1d16;
  --teal: #5f9c7e;
  --teal-deep: #355f4b;
  --moss: #4f6b3a;

  /* Texto */
  --cream: #f5e6c4;
  --bone: #ece0c8;
  --bone-dim: #b8a88c;

  --panel: rgba(24, 17, 11, 0.94);
  --panel-border: rgba(217, 180, 90, 0.28);
  --smoke: rgba(10, 7, 5, 0.74);
  --danger: #d9452e;
  --ok: #8fb34a;

  --radius: 3px;
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-deco: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --font-story: 'EB Garamond', Garamond, Georgia, serif;
  --font-ui: 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  --shadow-inset: inset 0 1px 0 rgba(255, 236, 190, 0.08), inset 0 -2px 0 rgba(0, 0, 0, 0.35);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --tex-stone: url('../assets/theme/stone-tile.webp');
  --tex-parchment: url('../assets/theme/parchment-tile.webp');
  --frame: url('../assets/theme/frame.svg');
  --divider: url('../assets/theme/divider.svg');
  --corner: url('../assets/theme/corner.svg');

  color-scheme: dark;
}

html {
  scrollbar-color: var(--gold-deep) var(--ink);
  -webkit-text-size-adjust: 100%;
}

::selection {
  background: rgba(200, 50, 31, 0.55);
  color: #fff6e6;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--ink);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-deep), #5a4015);
  border: 2px solid var(--ink);
  border-radius: 6px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  font-weight: 700;
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}