/* Extraction Compass — design tokens (single source of truth).
   Load FIRST on every page, before base.css and any page stylesheet.
   Values were previously duplicated across index.php, legal.css and
   spielerzahlen.css; this file replaces those copies. */

:root{
  /* ---- Surfaces (three-step tonal ramp) ---- */
  --bg-void: #1a1a1a;
  --bg-panel: #212121;
  --bg-panel-raised: #292929;

  /* ---- Structure ---- */
  --line: #3a3a3a;        /* default 1px border / divider */
  --line-soft: #282828;   /* quieter internal divider */
  --track: #454545;        /* progress / rating bar tracks */

  /* ---- Text ---- */
  --text-primary: #eeeeee;
  --text-muted: #b8b8b8;
  --text-dim: #949494;   /* dim body text - timestamps, IDs, dev names, footer, "off" states.
                            Raised from #7a7a7a so it clears WCAG AA (>=4.5:1) on every
                            surface step (void / panel / raised). Decorative faint marks
                            (placeholder glyphs, slider ticks) use --line, not this. */

  /* ---- Signal red (the one accent) ---- */
  --accent-red: #a91515;         /* solid fills, active/pressed */
  --accent-red-bright: #e2574a;  /* links, hover/focus, emphasis, lines */
  --accent-red-dim: #3a1414;     /* low-emphasis tinted background */

  /* ---- Functional attribute hues (coded meaning, never decoration) ---- */
  --accent-green: #6f9576;       /* PvE / live / positive */
  --accent-gold: #d4a13d;        /* PvPvE / deal / early access */
  --accent-gold-dim: #3a2c10;
  --accent-blue: #5b8fc7;        /* sci-fi / single-player / PlayStation */
  --accent-blue-dim: #16222f;
  --accent-blue-deep: #3d6591;
  --accent-purple: #9c7bc4;      /* fantasy / Epic */
  --accent-purple-dim: #241a30;
  --accent-purple-deep: #6b4f8f;
  --accent-horror: #c08484;      /* horror setting - desaturated brick; tag outline + small marks
                                    (the solid horror stamp fill stays on --danger-deep). NOT a
                                    second accent red: it is a functional attribute code, like
                                    green / gold / blue / purple. ~5.3:1 as text on --bg-panel. */
  --store-steam: #66c0f4;        /* Steam store link only */
  --danger-deep: #7a1f1f;        /* cancelled events, solid horror stamp fill */
  --on-gold: #211a08;            /* text/icon on a gold fill */

  /* ---- Status banner fills ----
     Solid ribbons / stripes laid over a card image (release "NEW", "SOON",
     "DEAL", "DISCONTINUED"). Deliberately higher opacity and contrast than the
     muted attribute hues above so the white / dark label text stays AA-legible
     on top of an arbitrary screenshot - a distinct role, not decoration. */
  --banner-new:          rgba(169,21,21,0.92);  /* new release (Signal Red at .92) */
  --banner-soon:         rgba(47,122,68,0.92);  /* coming soon + "upcoming" status stripe */
  --banner-deal:         rgba(212,161,61,0.94); /* active deal (dark label, --on-gold) */
  --banner-discontinued: rgba(150,30,26,0.92);  /* "discontinued" status stripe */

  /* ---- Player-counts trend scale ---- */
  --pz-up-2: #3fa65a;
  --pz-up-1: #7f9e73;
  --pz-flat: var(--text-dim);
  --pz-down-1: #d98b6a;
  --pz-down-2: var(--accent-red-bright);

  /* ---- Type scale (8 steps; replaces ~20 ad-hoc sizes) ----
     2xs micro stamps/ribbons · xs mono labels/footer/tags · sm field
     labels/chips/nav · md dense body/blurbs · base default body ·
     lg prominent body/card titles/article text · xl card & section
     titles · 2xl page-section headings. Fluid heading roles live in
     DESIGN.md typography (display / headline). */
  --fs-2xs: 0.625rem;   /* 10px  */
  --fs-xs:  0.6875rem;  /* 11px  */
  --fs-sm:  0.75rem;    /* 12px  */
  --fs-md:  0.8125rem;  /* 13px  */
  --fs-base: 0.875rem;  /* 14px  */
  --fs-lg:  1rem;       /* 16px  */
  --fs-xl:  1.1875rem;  /* 19px  */
  --fs-2xl: 1.375rem;   /* 22px  */

  /* Fluid headings */
  --fs-h1: clamp(1.75rem, 4vw, 2.75rem);      /* 28 -> 44 : page / article H1 */
  --fs-hero: clamp(2.25rem, 4.2vw, 4.25rem);  /* 36 -> 68 : tool hero only    */

  /* Decorative placeholder initial on imageless cards/modals - not reading type */
  --fs-glyph: 2.75rem;  /* 44px */

  /* ---- Form ---- */
  --radius: 0px;

  /* ---- Motion ---- */
  --dur-fast: .15s;   /* colour / border / background state changes */
  --dur-med: .2s;     /* hover transforms, icon rotation */

  /* ---- Type ---- */
  --font-display: 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}