@layer tokens {
:root {
  /* Typography */
  --font-ui: "Rajdhani", "Segoe UI", "Trebuchet MS", sans-serif;
  --font-mono: "Consolas", "Courier New", monospace;

  /* Geometry */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --radius-panel: var(--radius-none);
  --radius-card: var(--radius-none);
  --radius-button: var(--radius-none);
  --radius-field: var(--radius-none);
  --radius-tooltip: var(--radius-none);
  --radius-kbd: var(--radius-none);
  --border-width-base: 1px;
  --border-width-strong: 2px;
  --game-stage-width: 1920px;
  --game-stage-height: 1080px;
  --game-stage-queue-bar-width: 300px;
  --game-stage-map-size: 1008px;
  --game-stage-ui-bar-width: 612px;
  --game-stage-top-strip-height: 72px;
  --game-stage-scale: 1;
  --game-stage-outer-background: #000;

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 140ms;
  --duration-slow: 320ms;
  --ease-standard: ease;
  --ease-emphasis: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Core colors */
  --color-bg-0: #05060d;
  --color-bg-1: #09131b;
  --color-bg-canvas: #000;
  --color-surface-solid: #0f1a25;
  --color-text-primary: #d5efff;
  --color-text-muted: #6f8ca8;
  --color-text-soft: #c9e6f6;
  --color-text-bright: #d7f4ff;
  --color-text-accent: #a9ecff;
  --color-text-accent-strong: #c8f6ff;
  --color-text-accent-soft: #94d9f3;
  --color-text-chip: #91d9f5;
  --color-text-success-soft: #d6fff0;
  --color-text-danger-soft: #ffd1db;
  --color-text-warn-soft: #ffd8ab;
  --color-text-warn-strong: #ffe4b5;
  --color-text-on-light: #2f2600;

  /* Accent colors */
  --color-accent-cyan: #3bf2ff;
  --color-accent-green: #37ffb6;
  --color-accent-warn: #ffb347;
  --color-accent-danger: #ff496e;

  /* Border colors */
  --color-border-base: rgba(75, 130, 170, 0.35);
  --color-border-strong: rgba(109, 194, 255, 0.55);
  --color-border-panel: rgba(74, 148, 189, 0.42);
  --color-border-panel-strong: rgba(98, 218, 255, 0.78);
  --color-border-button: rgba(70, 126, 167, 0.7);
  --color-border-button-soft: rgba(95, 170, 219, 0.65);
  --color-border-field: rgba(72, 157, 196, 0.48);
  --color-border-field-soft: rgba(72, 157, 196, 0.45);
  --color-border-header: rgba(82, 179, 217, 0.48);
  --color-border-tab: rgba(74, 148, 189, 0.45);
  --color-border-hot: rgba(102, 233, 255, 0.9);
  --color-border-success: rgba(86, 241, 181, 0.55);
  --color-border-danger: rgba(255, 92, 120, 0.6);
  --color-border-warn: rgba(255, 179, 71, 0.65);

  /* Surface fills */
  --surface-field: rgba(4, 15, 22, 0.9);
  --surface-field-strong: rgba(4, 15, 22, 0.94);
  --surface-field-muted: rgba(6, 19, 29, 0.84);
  --surface-chip: rgba(10, 33, 48, 0.8);
  --surface-chip-neutral: rgba(5, 12, 18, 0.96);
  --surface-kbd: rgba(9, 18, 27, 0.9);
  --surface-overlay: rgba(2, 6, 10, 0.5);
  --surface-overlay-soft: rgba(2, 6, 10, 0.45);
  --surface-overlay-medium: rgba(2, 6, 10, 0.55);
  --surface-overlay-medium-strong: rgba(2, 6, 10, 0.58);
  --surface-overlay-strong: rgba(2, 6, 10, 0.62);
  --surface-tooltip: rgba(7, 15, 24, 0.96);
  --surface-status-warn: rgba(42, 10, 18, 0.84);
  --surface-status-success: rgba(9, 34, 26, 0.84);

  /* Gradients */
  --gradient-app-bg: linear-gradient(145deg, var(--color-bg-1), var(--color-bg-0));
  --gradient-surface-panel: linear-gradient(170deg, rgba(14, 26, 38, 0.9), rgba(9, 16, 24, 0.88));
  --gradient-surface-shell: linear-gradient(170deg, rgba(20, 33, 47, 0.95), rgba(7, 12, 19, 0.95));
  --gradient-surface-shell-soft: linear-gradient(180deg, rgba(12, 28, 40, 0.96), rgba(8, 20, 30, 0.96));
  --gradient-surface-card:
    linear-gradient(180deg, rgba(9, 28, 40, 0.72), rgba(5, 16, 24, 0.76)),
    rgba(6, 14, 22, 0.82);
  --gradient-surface-modal:
    linear-gradient(180deg, rgba(4, 12, 19, 0.96), rgba(2, 7, 12, 0.98)),
    repeating-linear-gradient(
      to bottom,
      rgba(95, 207, 255, 0.035) 0,
      rgba(95, 207, 255, 0.035) 1px,
      transparent 1px,
      transparent 5px
    );
  --gradient-surface-modal-header:
    linear-gradient(90deg, rgba(14, 47, 66, 0.7), rgba(8, 20, 31, 0.4)),
    linear-gradient(180deg, rgba(43, 118, 153, 0.14), transparent 70%);
  --gradient-surface-subheader: linear-gradient(180deg, rgba(11, 30, 42, 0.5), rgba(4, 15, 22, 0.25));
  --gradient-surface-tab: linear-gradient(180deg, rgba(12, 40, 56, 0.72), rgba(8, 21, 31, 0.82));
  --gradient-surface-button: linear-gradient(180deg, rgba(13, 27, 39, 0.9), rgba(8, 15, 23, 0.95));

  /* Shadows and glows */
  --shadow-panel: inset 0 0 24px rgba(51, 181, 255, 0.04);
  --shadow-card: inset 0 0 14px rgba(41, 170, 216, 0.08);
  --shadow-shell: 0 20px 40px rgba(0, 0, 0, 0.45), inset 0 0 40px rgba(57, 202, 255, 0.05);
  --shadow-shell-soft: 0 18px 30px rgba(0, 0, 0, 0.48), inset 0 0 10px rgba(59, 242, 255, 0.18);
  --shadow-modal:
    0 0 0 1px rgba(109, 194, 255, 0.25),
    0 24px 48px rgba(0, 0, 0, 0.62),
    0 0 38px rgba(59, 242, 255, 0.2),
    inset 0 0 42px rgba(59, 242, 255, 0.08);
  --shadow-tooltip: 0 8px 22px rgba(0, 0, 0, 0.45), inset 0 0 10px rgba(59, 242, 255, 0.1);
  --shadow-kbd: inset 0 0 8px rgba(59, 242, 255, 0.12);
  --shadow-button-hover: 0 0 24px rgba(59, 242, 255, 0.34), inset 0 0 10px rgba(59, 242, 255, 0.16);
  --shadow-button-active: 0 0 18px rgba(59, 242, 255, 0.45), inset 0 0 10px rgba(59, 242, 255, 0.24);

  /* Scrollbars */
  --color-scrollbar-track: rgba(2, 8, 13, 0.35);
  --color-scrollbar-thumb: rgba(81, 142, 185, 0.48);
  --color-scrollbar-thumb-hover: rgba(101, 171, 221, 0.6);

  /* Compatibility aliases for existing files */
  --bg-0: var(--color-bg-0);
  --bg-1: var(--color-bg-1);
  --panel: rgba(12, 19, 28, 0.84);
  --panel-solid: var(--color-surface-solid);
  --ink: var(--color-text-primary);
  --muted: var(--color-text-muted);
  --line: var(--color-border-base);
  --line-strong: var(--color-border-strong);
  --accent: var(--color-accent-cyan);
  --accent-2: var(--color-accent-green);
  --warn: var(--color-accent-warn);
  --bad: var(--color-accent-danger);
  --good: #3cffcc;
  --shadow: rgba(0, 0, 0, 0.5);
}
}