/* ===== DESIGN TOKENS ===== */
:root {
  /* Colours – dark theme (default) */
  --c-bg:           #0f1729;
  --c-bg-grad:      linear-gradient(160deg, #0f1729 0%, #1a2340 100%);
  --c-surface:      #1e2d4a;
  --c-surface-2:    #253558;
  --c-surface-glass:rgba(30, 45, 74, 0.75);
  --c-border:       rgba(255,255,255,0.08);
  --c-border-focus: #5b8dee;

  /* Player colours – amber vs teal (colour-blind safe) */
  --c-p0:           #f5a623;   /* amber  */
  --c-p0-dark:      #c47f10;
  --c-p0-glow:      rgba(245,166,35,0.45);
  --c-p1:           #2dd4bf;   /* teal   */
  --c-p1-dark:      #17a392;
  --c-p1-glow:      rgba(45,212,191,0.45);

  --c-empty:        rgba(255,255,255,0.06);
  --c-board-line:   rgba(255,255,255,0.15);
  --c-board-bg:     #131f36;
  --c-board-alt:    #172238;

  --c-text:         #e8eaf6;
  --c-text-muted:   rgba(232,234,246,0.55);
  --c-text-on-p0:   #1a1000;
  --c-text-on-p1:   #001a18;

  --c-accent:       #5b8dee;
  --c-danger:       #ef5350;
  --c-win-glow:     rgba(91,141,238,0.55);

  /* Radii */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* Spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Typography */
  --font: "Cairo", "Noto Kufi Arabic", "Tahoma", "Arial", sans-serif;
  --fs-xs:  11px;
  --fs-sm:  13px;
  --fs-md:  15px;
  --fs-lg:  18px;
  --fs-xl:  22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.55);
  --shadow-inner: inset 0 1px 0 rgba(255,255,255,0.07);

  /* Animation */
  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-flip:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    150ms;
  --dur-mid:     250ms;
  --dur-slow:    350ms;
  --dur-drop:    320ms;
  --dur-flip:    400ms;
}

/* Light theme */
@media (prefers-color-scheme: light) {
  :root {
    --c-bg:           #f0f4ff;
    --c-bg-grad:      linear-gradient(160deg, #e8eeff 0%, #f5f7ff 100%);
    --c-surface:      #ffffff;
    --c-surface-2:    #f2f5ff;
    --c-surface-glass:rgba(255,255,255,0.82);
    --c-border:       rgba(0,0,0,0.10);
    --c-board-bg:     #dde3f5;
    --c-board-alt:    #ccd4ee;
    --c-board-line:   rgba(0,0,0,0.18);
    --c-empty:        rgba(0,0,0,0.06);
    --c-text:         #1a2340;
    --c-text-muted:   rgba(26,35,64,0.55);
    --c-p0-dark:      #b07010;
    --c-p1-dark:      #0f8070;
    --c-text-on-p0:   #1a0d00;
    --c-text-on-p1:   #001a16;
  }
}