/* GammonBase design tokens — the single definition site for the visual
 * identity across gammonbase.com, desktop and mobile.
 *
 * Values ARE the gammonbase.com identity: dark warm-slate surfaces,
 * signature orange accent, golden secondaries, game-not-corporate.
 * Components reference tokens only — never raw values.
 *
 * Reconciled with the site 2026-08-03. This file was first extracted from
 * gammonbase.com's component styles (2026-07-18) but was never adopted BY
 * the site, so the two ran in parallel and three values drifted: the page
 * background, the radius scale, and the body font — which had become
 * 'Helvetica Neue' and therefore Arial on Windows, against the site's
 * Segoe UI. The site's values won, because the site is the shipping
 * identity and this file's job is to carry it, not to differ from it.
 *
 * `gammonbase.com/wwwroot/css/app-theme.css` now DERIVES its --color-*
 * variables from these tokens rather than restating them, so the two
 * surfaces cannot drift again. Changing a value here changes both.
 */
:root {
  /* Surfaces — darkest to lightest */
  --gb-surface-0: #0f1014;
  --gb-surface-1: #171a21;
  --gb-surface-2: #1f242c;
  --gb-surface-3: #2b313b;
  --gb-surface-4: #303642;     /* soft border / hairline */

  /* Text */
  --gb-text: #f4f6fa;
  --gb-text-muted: #b9c4d3;

  /* Brand accents */
  --gb-accent: #ff8a3c;        /* signature warm orange */
  --gb-accent-gold: #ffc85a;   /* golden highlight */
  --gb-accent-amber: #ffb347;  /* secondary warm */
  /* The accent's channels, for the rgba() forms a hex cannot serve. Kept
   * beside --gb-accent so recolouring means editing two adjacent lines
   * rather than discovering an orange the palette does not admit to. */
  --gb-accent-rgb: 255, 138, 60;
  --gb-focus-ring: rgba(255, 138, 60, 0.38);
  --gb-gradient-accent: linear-gradient(135deg, var(--gb-accent), var(--gb-accent-amber));

  /* Semantic */
  --gb-success: #4ccd7b;
  --gb-danger: #ff625d;
  --gb-info: #60a5fa;
  /* The gold, named for what it MEANS rather than what it is, so warnings
   * and decorative gold move independently if they ever need to.
   * Added 2026-08-03: the desktop referenced --gb-warning in six places and
   * nothing defined it, so each use fell through to an inline literal — and
   * they had already split into two colours (#ffc85a in the graphs and turn
   * log, #d8a33c in settings) for one semantic idea. */
  --gb-warning: var(--gb-accent-gold);

  /* Form controls */
  --gb-input-border: #4a5568;

  /* Elevation */
  --gb-shadow-sm: 0 2px 6px -1px rgba(0, 0, 0, 0.5);
  --gb-shadow: 0 6px 28px -8px rgba(0, 0, 0, 0.55);

  /* Typography */
  --gb-font: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, Helvetica, Arial, sans-serif;
  --gb-font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Shape & rhythm — the site's four-step scale. */
  --gb-radius-xs: 4px;
  --gb-radius-sm: 6px;
  --gb-radius-md: 12px;
  --gb-radius-lg: 18px;
  --gb-space-1: 4px;
  --gb-space-2: 8px;
  --gb-space-3: 16px;
  --gb-space-4: 24px;
  --gb-space-5: 40px;

  /* Scrollbar surfaces (thumb / track) */
  /* Derived, not restated: the thumb IS the border surface and the track IS
   * the page background, so recolouring the palette carries the scrollbars
   * with it. The hover lift is its own value — there is no surface between
   * --gb-surface-3 and --gb-surface-4 that reads as "lighter on hover". */
  --gb-scrollbar-thumb: var(--gb-surface-3);
  --gb-scrollbar-thumb-hover: #3a424e;
  --gb-scrollbar-track: var(--gb-surface-0);
}

/* Themed scrollbars — the app's surfaces, never the OS/browser default.
 * (Mirrors gammonbase.com's global scrollbar rule, warm-slate palette.) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--gb-scrollbar-thumb) var(--gb-scrollbar-track);
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: var(--gb-scrollbar-track);
}
*::-webkit-scrollbar-thumb {
  background: var(--gb-scrollbar-thumb);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--gb-scrollbar-thumb-hover);
}