/*
 * Carbles skin tokens (specification.md §11). Four skins - Green (default), Light, Dark, Pink -
 * selected via [data-theme] on <html>, persisted server-side per identity (§14) and applied
 * identically by every host (Carbles.Web, Carbles.Mobile). Component CSS should only ever
 * reference these custom properties, never a literal color, so a skin swap needs no component
 * changes.
 *
 * The four player colors (--color-player-*) are chosen to stay distinguishable from each other
 * and from each skin's --color-accent/state-fill tokens; colour is never the only cue anywhere in
 * the UI (every marble/card also carries a text aria-label - see Marble.razor/Card.razor), so
 * these pairings only need to be *visually* distinct, not colour-blind-provably unique. A full
 * axe-core/Lighthouse contrast audit runs in Session 12 once a real page exists to measure.
 *
 * --color-surface-raised and --color-surface-alt are both "a step off --color-surface", for two
 * different jobs. Raised is the board's own surface, and the Light skin deliberately leaves it flat
 * white so the board reads as one clean sheet. Alt is a panel *inside* a surface - a card's caption
 * strip, a menu's pill rows (menu.css) - so it has to stay visibly distinct from --color-surface in
 * every skin, including the light one, while still carrying --color-text and --color-text-muted at
 * §12's 4.5:1.
 */

/* Skin-independent: the wallpaper's tile edge, read by carbles-settings.js so the drift is a
   whole number of tiles and the loop never visibly jumps. */
:root {
  --card-tile-size: 180px;
}

:root,
[data-theme="green"] {
  --color-bg: #0f1f16;
  --color-surface: #16301f;
  --color-surface-raised: #1d3c28;
  --color-surface-alt: #22452e;
  --color-text: #eaf5ee;
  --color-text-muted: #a9c4b3;
  --color-accent: #3fae6a;
  --color-accent-text: #06170d;
  --color-border: #2d5138;
  --color-focus-ring: #7be3a8;
  --color-danger: #e5484d;
  --color-success: #3fae6a;

  --color-player-red: #e5484d;
  --color-player-blue: #4a9eff;
  --color-player-green: #f2c94c;
  --color-player-yellow: #f2994a;

  --color-card-face: #f7f3e8;
  --color-card-text: #1a1a1a;
  --color-track-space: #234a30;
  --color-capture-warning: #ffb020;
  --color-capture-warning-text: #1a1a1a;

  /* Card wallpaper (cards-background.css): tint and strength for this skin. */
  --color-card-pattern: #7fd8a4;
  --card-pattern-alpha: 0.06;
}

[data-theme="light"] {
  --color-bg: #f5f6f4;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-alt: #e9ebee;
  --color-text: #1c231d;
  --color-text-muted: #55605a;
  --color-accent: #1f7a45;
  --color-accent-text: #ffffff;
  --color-border: #d7ddd6;
  --color-focus-ring: #1f7a45;
  --color-danger: #c62828;
  --color-success: #1f7a45;

  --color-player-red: #c62828;
  --color-player-blue: #1a56db;
  --color-player-green: #7a5c00;
  --color-player-yellow: #b45a00;

  --color-card-face: #ffffff;
  --color-card-text: #1c231d;
  --color-track-space: #e7ece6;
  --color-capture-warning: #b45a00;
  --color-capture-warning-text: #ffffff;

  /* Card wallpaper (cards-background.css): tint and strength for this skin. */
  --color-card-pattern: #1f7a45;
  --card-pattern-alpha: 0.05;
}

[data-theme="dark"] {
  --color-bg: #101114;
  --color-surface: #17181c;
  --color-surface-raised: #1f2126;
  --color-surface-alt: #262a2e;
  --color-text: #f1f2f4;
  --color-text-muted: #9a9ea6;
  --color-accent: #7c9dff;
  --color-accent-text: #0b0e1a;
  --color-border: #2b2e35;
  --color-focus-ring: #a9c0ff;
  --color-danger: #ff6b6b;
  --color-success: #58d68d;

  --color-player-red: #ff6b6b;
  --color-player-blue: #7c9dff;
  --color-player-green: #ffe066;
  --color-player-yellow: #ffa94d;

  --color-card-face: #ececec;
  --color-card-text: #17181c;
  --color-track-space: #202329;
  --color-capture-warning: #ffa94d;
  --color-capture-warning-text: #17181c;

  /* Card wallpaper (cards-background.css): tint and strength for this skin. */
  --color-card-pattern: #7c9dff;
  --card-pattern-alpha: 0.05;
}

[data-theme="pink"] {
  --color-bg: #1c1117;
  --color-surface: #2a1620;
  --color-surface-raised: #351b28;
  --color-surface-alt: #3d2030;
  --color-text: #fbeef4;
  --color-text-muted: #d3a8bd;
  --color-accent: #ff6fa5;
  --color-accent-text: #2a0e18;
  --color-border: #4a2536;
  --color-focus-ring: #ffb3d1;
  --color-danger: #ff5470;
  --color-success: #5fd6a8;

  --color-player-red: #ff5470;
  --color-player-blue: #6fc3ff;
  --color-player-green: #ffe066;
  --color-player-yellow: #ffb454;

  --color-card-face: #fbeef4;
  --color-card-text: #2a0e18;
  --color-track-space: #3a1e2b;
  --color-capture-warning: #ffb454;
  --color-capture-warning-text: #2a0e18;

  /* Card wallpaper (cards-background.css): tint and strength for this skin. */
  --color-card-pattern: #ff9ec4;
  --card-pattern-alpha: 0.06;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* Shared across host pages (Play.razor et al.) - kept here rather than per-page scoped CSS
   since Blazor's CSS isolation would otherwise require redefining it in every scope that needs
   an accessible-but-not-visible heading/label (§12). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}