/* ---- 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: cs2 ---- */
/* themes/cs2.css  (loads after base-dark-gold.css and core.css)
   Direction (unslop pass):
   - Product:   a catch-up guide for Counter-Strike players coming back from CS:GO or a long break.
   - Character: dry, tactical, precise.
   - World:     the competitive HUD and the buy menu: graphite panels, white type, one yellow highlight.
   - Moments:   the map emblems and the weapon art carry the colour. The chrome stays quiet.
   - Signature: a crosshair as the date slider handle; square patch marks and timeline nodes.
   Yellow is the one accent: current tab, chosen year, the date slider, primary buttons, landmark updates.
   The quiet baseline lives in core.css; this file only sets tokens and CS2's own details.
   Original shapes only: no Valve logos or artwork. */
:root {
  /* graphite ramp, no tint */
  --bg: #111213;
  --panel: #18191b;
  --raise: #222326;
  --line: rgba(237, 237, 237, .09);
  --fg: #ededed;
  --muted: #a1a1a6;

  --accent: #f5d300;
  --accent-bright: #ffe14d;
  --accent-ink: #f5d300;
  --accent-soft: #1c1b12;
  --accent-line: rgba(245, 211, 0, .45);
  --accent-glow: transparent;
  --on-accent: #111213;
  --price: var(--fg);

  --good: #4cc38a;
  --bad: #e5484d;
  --on-good: #031a0b;

  --attr-1: #d98a4a;   /* Rifles / Defusal */
  --attr-2: #7fc29b;   /* Pistols / Hostage */
  --attr-3: #5aa0e0;   /* Snipers / Other */
  --attr-4: #a98be0;   /* SMGs, heavy, utility */

  --shade-strong: rgba(17, 18, 19, .92);
  --shade-none: rgba(17, 18, 19, 0);

  /* Oswald, condensed like the game's own type, for the page headline only; Barlow everywhere else */
  --font-display: var(--font-body);
  --font-headline: 'Oswald', 'Arial Narrow', sans-serif;

  --cut-size: 0px;
  --radius: 2px;
  --frame-clip: none;
  --bevel: none;
}

h1 { font-weight: 500; letter-spacing: -.01em; }
.deco-rule { display: block; height: 1px; margin: 0 0 32px; background: var(--line); }
.deco-rule i { display: none; }

/* signature: the date handle is a crosshair, gapped lines around a centre dot */
:root {
  --xhair:
    linear-gradient(var(--accent), var(--accent)) center / 18px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 2px 18px no-repeat,
    radial-gradient(circle, var(--accent) 0 2px, var(--panel) 2.5px 100%);
}
.scrub input[type=range]::-webkit-slider-thumb { clip-path: none; background: var(--xhair); border: 1px solid var(--accent); border-radius: 50%; }
.scrub input[type=range]::-moz-range-thumb { clip-path: none; background: var(--xhair); border: 1px solid var(--accent); border-radius: 50%; }
.scrub input[type=range]:focus-visible::-webkit-slider-thumb { background: var(--xhair); outline: 2px solid var(--fg); outline-offset: 2px; }
.mark i, .era-row .node, .dot.rw, .era details li::before { transform: none; }

/* weapon-class and map-group markers: small squares */
.gem { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border-radius: 1px; 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); }