/* ==========================================================================
   Theme bridge.
   Every theme file (themes/<id>.css) defines the standard theme tokens of the theme catalogue
   (--bg, --surface, --sep, --text, --radius, --card-radius, --bar, --seg-* …) and the JS computes
   --tint, --tint-press, --tint-soft, --on-tint, --warn. This file maps them onto the semantic tokens
   the site's blocks use (tokens.css).

   Olive is excluded: Olive IS the defaults in tokens.css (the original Steam 2003 look).

   Specificity: ":root:where(…)" equals tokens.css ":root" and is loaded later, so it wins; theme
   files (":root[data-skin=x]") are more specific and may override any token here.
   ========================================================================== */
:root:where([data-skin]:not([data-skin="olive"])) {
  /* defaults of the theme framework */
  --tint: #007aff;
  --tint-press: #0062cc;
  --tint-soft: rgba(0, 122, 255, 0.14);
  --on-tint: #ffffff;
  --warn: #ff9500;
  --tint-text: color-mix(in srgb, var(--tint) 72%, var(--text));
  --field-bg: color-mix(in srgb, var(--text) 6%, var(--surface));
  --field-line: var(--sep);
  --field-shadow: none;
  --hero-weight: 600;
  --hero-tracking: 0;
  --nav-weight: 600;

  /* palette */
  --page-bg: var(--bg);
  --c-bg-darker: var(--bg);
  --c-bg: var(--surface);
  --c-bg-sunken: var(--field-bg);
  --c-bg-deep: color-mix(in srgb, var(--tint) 10%, var(--field-bg));
  --c-bg-hover: var(--surface-press);
  --c-bg-row: color-mix(in srgb, var(--text) 3%, transparent);
  --c-light: var(--sep);
  --c-dark: var(--sep);
  --c-shade: var(--shadow-soft);
  --c-text: var(--text);
  --c-text-dim: var(--text-2);
  --c-text-faint: var(--text-3);
  --c-accent: var(--tint-text);
  --c-select: var(--tint);
  --c-select-text: var(--on-tint);
  --c-ok: var(--ok);
  --c-error: var(--danger);
  --c-warn: var(--warn);
  --c-info: var(--tint);
  --fw-heading: var(--hero-weight);
  --tracking-heading: var(--hero-tracking);

  /* shape and depth */
  --bevel-raised: var(--sep-strong) var(--sep-strong) var(--sep-strong) var(--sep-strong);
  --bevel-sunken: var(--sep) var(--sep) var(--sep) var(--sep);
  --r-ctl: var(--radius);
  --r-panel: var(--card-radius);
  --r-chip: var(--chip-r);
  --img-filter: none;
  --logo-filter: none;
  --focus-ring: 2px solid var(--tint);
  --focus-offset: 2px;

  /* windows = the theme's groups/cards */
  --c-window-bg: var(--group-bg, var(--surface));
  --bevel-window: var(--sep) var(--sep) var(--sep) var(--sep);
  --sh-window: 0 1px 3px var(--shadow-soft);
  --c-title: var(--text);
  --title-bg: none;
  --title-weight: var(--nav-weight);
  --title-transform: none;
  --title-tracking: 0;
  --title-shadow: none;
  --title-border: 1px solid var(--sep);
  --etch: none;
  --c-heading: var(--tint-text);

  /* buttons — catalogue default: outlined in accent, filled when pressed; primary is filled */
  --c-btn-bg: transparent;
  --c-btn-text: var(--tint-text);
  --bevel-btn: var(--tint) var(--tint) var(--tint) var(--tint);
  --sh-btn: none;
  --fw-btn: 500;
  --btn-text-shadow: none;
  --c-btn-hover: var(--tint-soft);
  --c-btn-pressed: var(--tint);
  --c-btn-pressed-text: var(--on-tint);
  --bevel-btn-pressed: var(--tint) var(--tint) var(--tint) var(--tint);
  --sh-btn-pressed: none;
  --c-primary-bg: var(--tint);
  --c-primary-text: var(--on-tint);
  --bevel-primary: var(--tint) var(--tint) var(--tint) var(--tint);
  --sh-primary: none;
  --primary-outline: none;
  --primary-text-shadow: none;
  --c-btn-disabled: var(--c-btn-text);
  --btn-disabled-shadow: none;
  --btn-disabled-opacity: 0.45;

  /* inputs */
  --c-input-bg: var(--field-bg);
  --c-input-focus: color-mix(in srgb, var(--tint) 8%, var(--field-bg));
  --bevel-input: var(--field-line) var(--field-line) var(--field-line) var(--field-line);
  --sh-input: var(--field-shadow);
  --select-arrow-bg: transparent;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath fill='%23888888' d='M0 0h8L4 5z'/%3E%3C/svg%3E");
  --c-check-on: var(--tint);
  --c-check-mark: var(--on-tint);
  --bevel-check-on: var(--tint) var(--tint) var(--tint) var(--tint);
  --r-check: min(var(--radius), 4px);

  /* cards */
  --c-card-bg: var(--surface);
  --bevel-card: var(--sep) var(--sep) var(--sep) var(--sep);
  --sh-card: 0 1px 2px var(--shadow-soft);
  --c-card-hover: var(--surface-press);

  /* top bar and footer */
  --c-bar-bg: var(--bar);
  --bar-backdrop: var(--bar-blur);
  --c-bar-text: var(--text);
  --c-bar-line: var(--bar-line);
  --bar-shadow: none;
  --footer-shadow: none;
  --fw-bar-title: var(--nav-weight);

  /* navigation */
  --c-nav-text: var(--text-2);
  --c-nav-hover-bg: color-mix(in srgb, var(--text) 6%, transparent);
  --bevel-nav-hover: transparent transparent transparent transparent;
  --c-nav-active-bg: var(--tint-soft);
  --c-nav-active-text: var(--tint-text);
  --bevel-nav-active: transparent transparent transparent transparent;
  --sh-nav-active: none;
  --c-admin-nav-bg: var(--bar);

  /* tabs — underlined */
  --c-tab-bg: transparent;
  --c-tab-text: var(--text-2);
  --bevel-tab: transparent transparent transparent transparent;
  --c-tab-active-bg: transparent;
  --c-tab-active-text: var(--text);
  --sh-tab-active: inset 0 -2px 0 var(--tint);
  --c-tabs-line: var(--sep);
  --r-tab: 0px;

  /* segmented */
  --c-seg-bg: transparent;
  --c-seg-text: var(--seg-text);
  --bevel-seg: var(--seg-line) var(--seg-line) var(--seg-line) var(--seg-line);
  --c-seg-on-bg: var(--seg-on);
  --c-seg-on-text: var(--seg-on-text);
  --bevel-seg-on: var(--seg-line) var(--seg-line) var(--seg-line) var(--seg-line);
  --r-seg: var(--seg-r);

  /* tables */
  --c-th-bg: var(--surface);
  --bevel-th: transparent transparent var(--sep-strong) transparent;

  /* overlays, progress, scrollbars */
  --c-toast-bg: var(--toast-bg);
  --c-toast-text: var(--toast-text);
  --progress-fill: var(--tint);
  --c-scroll-thumb: var(--sep-strong);
  --c-scroll-track: transparent;
  --bevel-scroll: transparent transparent transparent transparent;
  --r-scroll: 8px;

  /* charts — reference categorical palette, validated for light/dark surfaces */
  --c-chart-grid: var(--sep);
  --c-chart-seq: var(--tint);
  --c-series-1: #2a78d6;
  --c-series-2: #eb6834;
  --c-series-3: #1baf7a;
  --c-series-4: #eda100;
  --c-series-5: #e87ba4;
  --c-series-6: #008300;
}

:root:where([data-skin]:not([data-skin="olive"]).theme--dark) {
  --c-series-1: #3987e5;
  --c-series-2: #d95926;
  --c-series-3: #199e70;
  --c-series-4: #c98500;
  --c-series-5: #d55181;
  --c-series-6: #008300;
}

/* Small structural touches every theme shares */
:root:where([data-skin]:not([data-skin="olive"])) .window__title {
  border-bottom: var(--title-border);
}

:root:where([data-skin]:not([data-skin="olive"])) .window__title + .window__body {
  padding-top: var(--sp-5);
}

:root:where([data-skin]:not([data-skin="olive"])) .button:active .button__label {
  transform: none;
}

:root:where([data-skin]:not([data-skin="olive"])) .admin__title,
:root:where([data-skin]:not([data-skin="olive"])) .catalog__heading,
:root:where([data-skin]:not([data-skin="olive"])) .app-card__name {
  font-weight: var(--fw-heading);
  letter-spacing: var(--tracking-heading);
}