/* ============================================================
   Realms of Elynia — Design Tokens v1  (KANONINEN — omistajan hyväksymä)
   Style: colored flat vector · stone & bronze
   This file mirrors into the game repo as public/assets/ tokens.
   ============================================================ */

/* Cinzel (variable, 400-900) self-hostattuna — --font-display osoitti tähän
   alusta asti mutta fontti ladataan vasta nyt. Latin-subset kattaa myös ä/ö.
   OFL-lisenssi. */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/cinzel.woff2') format('woff2');
}

:root {
  /* Surfaces */
  --sand: #EAE0C9;            /* page background */
  --parchment: #F5EEDD;       /* cards, panels */
  --parchment-deep: #E7DBBC;  /* inset wells, table stripes */
  --line: #D3C39E;            /* hairline borders */

  /* Text */
  --ink: #2B2118;             /* primary text */
  --ink-soft: #6B5A44;        /* secondary text, captions */

  /* Accents */
  --bronze: #8C6B2F;          /* primary actions, links */
  --bronze-deep: #6E521F;     /* hover / pressed */
  --gold: #C9A24B;            /* highlights, coin, focus ring */
  --crimson: #7A2020;         /* danger, damage, HP */
  --laurel: #4A5D33;          /* success, victory, regen */

  /* Dark panels (tooltips, combat log, item cards) */
  --night: #241C12;
  --night-soft: #3A2E1D;
  --night-line: #4E3F28;
  --night-text: #EDE4CF;

  /* Typography */
  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-body: Georgia, 'Times New Roman', serif;

  /* Rarity — item NAME colors (tuned for dark panels) */
  --rarity-common: #F2EFE8;
  --rarity-uncommon: #57B558;
  --rarity-rare: #4E90E2;
  --rarity-epic: #AE6BF0;
  --rarity-legendary: #F5921F;
  --rarity-mythic: #F04E42;
  /* Common flips dark on light surfaces */
  --rarity-common-on-light: #5A5346;

  /* Rarity glows — Epic, Legendary, Mythic only */
  --glow-epic: 0 0 9px rgba(174, 107, 240, .60);
  --glow-legendary: 0 0 9px rgba(245, 146, 31, .60);
  --glow-mythic: 0 0 11px rgba(240, 78, 66, .70);

  /* Dimensions */
  --radius: 6px;
  --gap: 12px;
  --shadow: 0 2px 6px rgba(43, 33, 24, .18);
}

/* Item-name rarity classes — rarity is conveyed by name color, no frames */
.rarity-common     { color: var(--rarity-common); }
.rarity-uncommon   { color: var(--rarity-uncommon); }
.rarity-rare       { color: var(--rarity-rare); }
.rarity-epic       { color: var(--rarity-epic);      text-shadow: var(--glow-epic); }
.rarity-legendary  { color: var(--rarity-legendary); text-shadow: var(--glow-legendary); }
.rarity-mythic     { color: var(--rarity-mythic);    text-shadow: var(--glow-mythic);
                     animation: mythic-pulse 2.4s ease-in-out infinite; }

/* On parchment/light surfaces */
.on-light .rarity-common { color: var(--rarity-common-on-light); }

@keyframes mythic-pulse {
  0%, 100% { text-shadow: 0 0 6px rgba(240, 78, 66, .45); }
  50%      { text-shadow: 0 0 15px rgba(240, 78, 66, .95); }
}

@media (prefers-reduced-motion: reduce) {
  .rarity-mythic { animation: none; }
}

/* UI icons: 24×24 colored flat-vector SVG (fills, no currentColor) */
.icon { width: 24px; height: 24px; flex: none; }

/* ============================================================
   Legacy aliases — vanhemmat kortit käyttävät --gl-* -nimiä.
   Uusi työ käyttää yllä olevia kanonisia nimiä.
   ============================================================ */
:root {
  --gl-bg: var(--sand);
  --gl-panel: var(--parchment);
  --gl-panel-deep: var(--parchment-deep);
  --gl-border: var(--line);
  --gl-ink: var(--ink);
  --gl-ink-soft: var(--ink-soft);
  --gl-bronze: var(--bronze);
  --gl-gold: var(--gold);
  --gl-red: var(--crimson);
  --gl-red-deep: #571313;
  --gl-laurel: var(--laurel);
  --gl-blue: #2E5A7A;
  --gl-rarity-common: var(--rarity-common);
  --gl-rarity-uncommon: var(--rarity-uncommon);
  --gl-rarity-rare: var(--rarity-rare);
  --gl-rarity-epic: var(--rarity-epic);
  --gl-rarity-legendary: var(--rarity-legendary);
  --gl-rarity-mythic: var(--rarity-mythic);
  --gl-radius: var(--radius);
  --gl-gap: var(--gap);
  --gl-shadow: var(--shadow);
  --gl-font-display: var(--font-display);
  --gl-font-body: var(--font-body);
  --gl-font-num: 'Segoe UI', system-ui, sans-serif; /* legacy; uusi linja: statit Georgia small-caps */
}