:root {
  /* Backgrounds */
  --bg-base:     #0f0f13;
  --bg-surface:  #1a1a24;
  --bg-elevated: #25253a;
  --bg-hover:    #2e2e45;

  /* Text */
  --text-primary: #f0f0f5;
  --text-muted:   #888899;
  --text-subtle:      #7a7a8c;   /* 4.61:1 on --bg-base */
  --text-subtle-plus: #8e8ea0;   /* 4.97:1 on --bg-surface — use inside cards */

  /* Accent */
  --accent:       #FFD500;
  --accent-dim:   #b39500;
  --accent-glow:  rgba(255, 213, 0, 0.12);

  /* Face colors */
  --face-U: #FFD500;
  --face-R: #E03030;
  --face-F: #30A030;
  --face-D: #e8e8e8;
  --face-L: #E07820;
  --face-B: #3060E0;

  /* Semantic */
  --success:  #34d399;
  --border:   rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.14);

  /* Type scale */
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-base: 1rem;
  --text-lg:  1.125rem;
  --text-xl:  1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Radius */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition:      200ms ease;
  --transition-slow: 350ms ease;

  /* Layout */
  --max-width: 1200px;
  --nav-height: 60px;
}