/**
 * design-tokens.css
 * Beautiful Minimalist Neon Pastel Light-Design Variables
 * Strictly adheres to Isoluminant/Isosaturated HSL and Fibonacci scales.
 */

:root {
  /* ==========================================================================
     1. Premium Flat Color Palette: Prussian Navy, Gold, Silver, and White
        and Bright Beautiful Player Hues (Red, Blue, Yellow, Green)
     ========================================================================== */
  /* Pure Hue Degrees for players: 赤(355), 青(215), 黄色(46), 緑(140) */
  --hue-player-a: 355;  /* Bright Beautiful Red */
  --hue-player-b: 215;  /* Bright Beautiful Blue */
  --hue-player-c: 46;   /* Bright Beautiful Yellow */
  --hue-player-d: 140;  /* Bright Beautiful Green */
  --hue-system:   165;  /* Emerald Mint Teal (UI / Money) */

  /* Global Saturation and Lightness for Players */
  --color-sat: 90%;
  --color-lit: 50%;

  /* Concrete Player Colors */
  --color-player-a: hsl(var(--hue-player-a), var(--color-sat), var(--color-lit));
  --color-player-b: hsl(var(--hue-player-b), var(--color-sat), var(--color-lit));
  --color-player-c: hsl(var(--hue-player-c), var(--color-sat), 50%); /* Optimize yellow lightness */
  --color-player-d: hsl(var(--hue-player-d), var(--color-sat), 42%); /* Optimize green visibility */
  --color-system:   #c5a059; /* Gold */

  /* Translucent Accent Variants */
  --color-player-a-trans: hsla(var(--hue-player-a), var(--color-sat), var(--color-lit), 0.12);
  --color-player-b-trans: hsla(var(--hue-player-b), var(--color-sat), var(--color-lit), 0.12);
  --color-player-c-trans: hsla(var(--hue-player-c), var(--color-sat), 50%, 0.12);
  --color-player-d-trans: hsla(var(--hue-player-d), var(--color-sat), 42%, 0.12);
  --color-system-trans:   rgba(197, 160, 89, 0.12);

  /* Executive Brand Colors: Prussian Navy (#002244), Gold (#c5a059), Silver, and White */
  --color-navy:         #002244;  /* Deep Prussian Navy */
  --color-gold:         #c5a059;  /* Satin Matte Gold */
  --color-silver:       #8e9bb0;  /* premium brushed silver */
  
  --color-canvas:       #f1f3f5;  /* Premium Silver-White canvas */
  --color-surface:      #ffffff;  /* Pure flat white */
  --color-surface-alt:  #f8f9fa;  /* Flat clean subpanel */
  --color-border:       #e2e8f0;  /* Strict slate-silver border */
  --color-border-glow:  #002244;  /* Deep navy active hover */

  /* Text Colors */
  --color-text-main:    #002244;  /* Majestic Prussian Navy for all headers/text */
  --color-text-muted:   #495057;  /* Carbon charcoal for description */
  --color-text-dim:     #868e96;  /* Brushed slate for inactive elements */

  /* ==========================================================================
     2. Fibonacci Spacing System (Values: 3, 5, 8, 13, 21, 34)
     ========================================================================= */
  --space-xs:  3px;
  --space-sm:  5px;
  --space-md:  8px;
  --space-lg:  13px;
  --space-xl:  21px;
  --space-xxl: 34px;

  /* ==========================================================================
     3. Fibonacci Typography System
     ========================================================================== */
  --font-xs: 11px; /* Badges & tiny metadata */
  --font-sm: 13px; /* Smaller UI stats & description (Fibonacci 13) */
  --font-md: 16px; /* Standard Body & Cards text */
  --font-lg: 21px; /* Panel headers & Titles (Fibonacci 21) */
  --font-xl: 34px; /* Big banners & game logo (Fibonacci 34) */

  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", sans-serif;
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

  /* ==========================================================================
     4. Minimalist Flat Card Design Specifications
     ========================================================================== */
  --card-border-width: 1px;
  --card-border-radius: 6px;
  --transition-speed: 0.15s;
}

/* Base resets & structural styles */
body {
  margin: 0;
  padding: 0;
  background-color: var(--color-canvas);
  background-image: linear-gradient(135deg, hsl(210, 60%, 97%) 0%, hsl(200, 50%, 94%) 100%);
  color: var(--color-text-main);
  font-family: var(--font-family-sans);
  overflow: hidden;
  user-select: none;
}

/* Elegant light-theme custom scrollbars */
::-webkit-scrollbar {
  width: var(--space-md);
  height: var(--space-md);
}
::-webkit-scrollbar-track {
  background: var(--color-surface-alt);
}
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--card-border-radius);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-glow);
}