/* ---- theme layer: base-dark-gold ---- */
/* themes/base-dark-gold.css
   The reusable base look: dark slate, aged-gold accent, serif display type, condensed labels.
   It is the "token contract" every theme layer fills in. A game theme (themes/<game>.css) loads after this file and
   only overrides what it needs. core.css never uses a literal colour, so a theme can restyle everything from here.

   TOKEN CONTRACT
   surfaces   --bg page ground | --panel / --panel-bg framed surfaces | --raise controls | --line hairlines
   text       --fg body | --muted secondary
   accent     --accent main brand colour | --accent-bright highlight | --accent-soft tinted fill | --accent-line border
              --accent-glow glow colour | --on-accent text on top of an accent fill
   price      --price gold costs and price tags (defaults to the accent)
   lines      --link-line link underline | --hover-line control border on hover | --good-line new-tag outline
   text       --accent-ink the accent used as text | --font-headline the page headline face
   motion     --ease the one easing curve
   semantic   --good buff / positive | --bad nerf / negative | --on-good text on a good fill
   attributes --attr-1..4 the four entity classes (Dota: Strength, Agility, Intelligence, Universal)
   shading    --shade-strong / --shade-none / --shade-text: gradient and text-shadow over portraits
   type       --font-display headings | --font-body text | --font-label condensed labels, numbers
   frame      --radius corner radius | --frame-clip clip-path for framed panels | --bevel box-shadow for panel edges
              --cut-size chamfer size used inside --frame-clip
   hooks      .deco-sigil .deco-rule (ornaments) and .gem (class icons) are hidden in core.css; a theme turns them on. */
:root {
  --bg: #0a0d13;
  --panel: #121723;
  --panel-bg: var(--panel);
  --raise: #1a2130;
  --line: #262e40;
  --fg: #e9e4d4;
  --muted: #98a0b2;

  --accent: #d6aa48;
  --accent-bright: #fff3c9;
  --accent-soft: #3a3019;
  --accent-line: #4a3d1c;
  --accent-glow: rgba(214, 170, 72, .45);
  --on-accent: #1b1404;
  --price: var(--accent);
  --accent-ink: var(--accent);                                   /* the accent as text on dark surfaces, 4.5:1 */
  --link-line: color-mix(in srgb, var(--fg) 35%, transparent);   /* quiet underline under links */
  --hover-line: color-mix(in srgb, var(--fg) 24%, transparent);  /* control border on hover */
  --good-line: color-mix(in srgb, var(--good) 50%, transparent); /* outline of a "new" tag */
  --ease: cubic-bezier(.22, 1, .36, 1);

  --good: #62d28c;
  --bad: #f0614f;
  --on-good: #06210f;

  --attr-1: #e5604f;
  --attr-2: #4fc47f;
  --attr-3: #4ba4e2;
  --attr-4: #b98cf2;

  --shade-strong: rgba(10, 13, 19, .92);
  --shade-none: rgba(10, 13, 19, 0);
  --shade-text: #000;

  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-body: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --font-label: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-headline: var(--font-display);                          /* the page headline only */

  --radius: 6px;
  --cut-size: 0px;
  --frame-clip: none;
  --bevel: none;
  color-scheme: dark;
}

/* ---- theme layer: dota2 ---- */
/* themes/dota2.css  (loads after base-dark-gold.css and core.css)
   Direction (unslop pass):
   - Product:   a catch-up guide for Dota 2 players coming back after months or years.
   - Character: blunt, exact, a little grim.
   - World:     the Dire side at night: dark stone, iron, dried blood. Surfaces are near-neutral charcoal, barely warm.
   - Moments:   the hero portraits (picture block, picture strips, hero cards) carry the colour. The chrome stays quiet.
   - Signature: the rune diamond, only on the date slider, the patch marks and the timeline nodes (core defaults),
                plus chamfered corners on the big panels like the in-game shop.
   Blood red is the one accent. Gold only for gold costs. Green and red only for buff and nerf.
   The quiet baseline lives in core.css; this file only sets tokens and Dota's own details.
   Original shapes only: no Valve logos or artwork. */
:root {
  /* one near-neutral ramp, a touch warm */
  --bg: #0e0c0c;
  --panel: #151313;
  --raise: #1e1b1b;
  --line: rgba(239, 233, 231, .09);
  --fg: #efe9e7;
  --muted: #a39b98;

  /* one accent: blood red. --accent-ink is the same red lifted for text on dark surfaces (4.5:1) */
  --accent: #b3121d;
  --accent-bright: #c71a26;
  --accent-ink: #f0636a;
  --accent-soft: #1d1415;
  --accent-line: rgba(179, 18, 29, .55);
  --accent-glow: transparent;
  --on-accent: #ffffff;
  --price: #d6a646;

  --good: #4cc38a;
  --bad: #e5484d;
  --on-good: #06210f;

  --attr-1: #d64545;   /* Strength */
  --attr-2: #3fb56f;   /* Agility */
  --attr-3: #4a9ee0;   /* Intelligence */
  --attr-4: #a98be0;   /* Universal */

  --shade-strong: rgba(14, 12, 12, .92);
  --shade-none: rgba(14, 12, 12, 0);

  /* Cinzel (close to Dota's own engraved capitals) for the page headline only; Barlow everywhere else */
  --font-display: var(--font-body);
  --font-headline: 'Cinzel', 'Trajan Pro', Georgia, serif;

  /* chamfered corners on the big panels only (console, cards, patch rows) */
  --cut-size: 10px;
  --radius: 0px;
  --frame-clip: polygon(var(--cut-size) 0, calc(100% - var(--cut-size)) 0, 100% var(--cut-size), 100% calc(100% - var(--cut-size)), calc(100% - var(--cut-size)) 100%, var(--cut-size) 100%, 0 calc(100% - var(--cut-size)), 0 var(--cut-size));
  --bevel: none;
}

.deco-rule { display: block; height: 1px; margin: 0 0 32px; background: var(--line); }
.deco-rule i { display: none; }

/* attribute gems: Dota's hex shape, flat colour */
.gem { display: inline-block; width: 10px; height: 11px; margin-right: 6px; vertical-align: -1px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--muted); }
.gem.a-str { background: var(--attr-1); } .gem.a-agi { background: var(--attr-2); } .gem.a-int { background: var(--attr-3); } .gem.a-all { background: var(--attr-4); }
.pill .gem { margin-right: 8px; }