/*
 * Match UI design tokens. Colour values come from docs/design-system/color-spec.md: the
 * canonical color layer is generated from private scales in colorTokens.ts.
 * Regenerate with node apps/web/scripts/generate-colors.mjs.
 * :root is dark plus all structure; the light selector overrides colour and shadow only.
 */

:root {
  --color-accent: #f2c230;
  --color-accent-fg: #161b19;
  --color-accent-hover: #ffd74d;
  --color-accent-on-dark: #e5ae1a;
  --color-accent-on-light: #8a6400;
  --color-accent-press: #e5ae1a;
  --color-accent-soft: #3a2f0e;
  --color-accent-strong: #f2c230;
  --color-armed: #c3e38d;
  --color-board-field: #040b13;
  --color-border: #38423d;
  --color-border-glass: rgb(242 246 243 / 0.24);
  --color-border-strong: #6a7570;
  --color-card-edge: #ffffff;
  --color-commit-hover: #ffffff;
  --color-commit-press: #e4e8e6;
  --color-danger: #ff5c62;
  --color-danger-hover: #ff777a;
  --color-danger-ink: #e8946e;
  --color-danger-soft: #3b1417;
  --color-dev-card-soft: #141519;
  --color-divider: #2a332f;
  --color-focus-ring: #5a9bff;
  --color-hover-wash: rgb(242 246 243 / 0.09);
  --color-info: #3bbee0;
  --color-on-dark: #ffffff;
  --color-on-fill: #161b19;
  --color-on-light: #1f2123;
  --color-player-amber: #dda615;
  --color-player-amber-ink: #f1be51;
  --color-player-amber-rim: #f8dba0;
  --color-player-azure: #0a5ccc;
  --color-player-azure-ink: #318af9;
  --color-player-crimson: #920000;
  --color-player-crimson-ink: #ff4b4d;
  --color-player-ink: #1f2628;
  --color-player-ink-display: #272b2d;
  --color-player-ink-ink: #adb6b1;
  --color-player-lilac: #f2f1ff;
  --color-player-lilac-display: #ffffff;
  --color-player-lilac-ink: #f2f1ff;
  --color-player-mint: #18b7a1;
  --color-player-mint-ink: #1fd0b7;
  --color-player-rose: #e13763;
  --color-player-rose-ink: #ff6dc2;
  --color-player-rose-on: #050706;
  --color-player-violet: #b891ff;
  --color-player-violet-ink: #dbc9ff;
  --color-res-brick: #d27a52;
  --color-res-brick-soft: #3a1e14;
  --color-res-any: #a0bfd5;
  --color-res-any-soft: #1c2c38;
  --color-res-ore: #9aa4ae;
  --color-res-ore-soft: #23282c;
  --color-res-wheat: var(--color-accent);
  --color-res-wheat-soft: #3a300f;
  --color-res-wood: #6fa34a;
  --color-res-wood-soft: #1c2614;
  --color-res-sheep: #c3e38d;
  --color-res-sheep-soft: #2e3a1e;
  --color-scrim: rgb(5 7 6 / 0.66);
  --color-selected: #f2f6f3;
  --color-shadow-ink: #050706;
  --color-success: #4ade80;
  --color-success-hover: #64f494;
  --color-success-soft: #0e2a18;
  --color-surface-field: #050706;
  --color-surface-glass-hover: rgb(31 38 34 / 0.74);
  --color-surface-inset: #161c19;
  --color-surface-muted: #1f2622;
  --color-surface-panel: #0e1311;
  --color-surface-raised: #1f2622;
  --color-text: #f2f6f3;
  --color-text-muted: #87918c;
  --color-text-secondary: #adb6b1;
  --color-warning: #ff9b3d;
  --color-warning-ink: #ff9b3d;
  --color-warning-soft: #3a2410;

  --viewport-min: 1280px;
  --grid-pad: 10px;
  --grid-gap: 12px;
  --stack-gap: 10px;
  --row-topbar: 64px;
  --col-left: 332px;
  --panel-pad: 18px;
  --panel-header-h: 52px;
  --hand-pad-y: 5px;
  --row-hand: 102px;
  --player-card-h: 54px;
  --player-card-dense-h: 54px;
  --endturn-h: 38px;
  --endturn-w: 168px;
  --ad-floor-h: 96px;

  --card-hand-w: 66px;
  --card-hand-h: 92px;
  --card-hand-r: var(--radius-xs);
  --card-mini-w: 33px;
  --card-mini-h: 46px;
  --card-mini-r: calc(var(--radius-xs) / 2);
  --card-xs-w: 15px;
  --card-xs-h: 21px;
  --card-xs-r: calc(var(--radius-xs) * 15 / 66);
  --card-stack-step: 3px;
  --card-badge-mini: 14px;
  --card-badge-xs: 12px;
  --card-badge-bleed: 6px;

  --space-px: 1px;
  --space-1: 4px;
  --space-1_5: 6px;
  --space-2: 8px;
  --space-2_5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  --radius-inner: var(--radius-xs);
  --radius-nested: var(--radius-md);
  --radius-card: var(--radius-lg);
  --radius-panel: var(--radius-xl);
  --radius-pill: var(--radius-full);

  --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --text-3xs: 9px;
  --lh-3xs: 10px;
  --text-2xs: 11px;
  --lh-2xs: 16px;
  --text-xs: 12px;
  --lh-xs: 16px;
  --text-label: 13px;
  --lh-label: 18px;
  --text-sm: 13px;
  --lh-sm: 18px;
  --text-base: 14px;
  --lh-base: 20px;
  --text-md: 16px;
  --lh-md: 22px;
  --text-lg: 20px;
  --lh-lg: 26px;
  --text-xl: 26px;
  --lh-xl: 32px;
  --text-2xl: 30px;
  --lh-2xl: 36px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-label: 0.02em;
  --tracking-micro: 0.04em;
  --tracking-tight: -0.01em;

  --shadow-1: 0 1px 3px rgb(0 0 0 / 0.3), 0 6px 16px rgb(0 0 0 / 0.22);
  --shadow-2: 0 6px 22px rgb(0 0 0 / 0.34);
  --shadow-3: 0 18px 48px rgb(0 0 0 / 0.46);
  --shadow-panel: 0 1px 2px rgb(0 0 0 / 0.24), 0 10px 28px rgb(0 0 0 / 0.26);
  --shadow-lift: 0 0 0 1px var(--color-accent), 0 0 28px rgb(242 194 48 / 0.28);
  --dim-opacity: 0.28;
  --lift-scale: 1.02;
  --energy-blue: #3a8bff;
  --energy-deep: rgb(2% 24% 100%);
  --energy-bright: rgb(22% 70% 100%);

  --z-board: 0;
  --z-board-overlay: 10;
  --z-cursor-preview: 20;
  --z-scrim: 30;
  --z-panel-lift: 40;
  --z-popover: 50;
  --z-dialog: 60;
  --z-toast: 70;

  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;
  --dur-dice-tumble: 560ms;
  --dice-tick: 70ms;
  --dur-build-fill: 240ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme='light'] {
  --color-accent: #e5ae1a;
  --color-accent-hover: #f2c230;
  --color-accent-soft: #fbf0cf;
  --color-accent-strong: #8a6400;
  --color-board-field: #8bb0d0;
  --color-border: #d1d8d4;
  --color-border-glass: rgb(13 18 17 / 0.16);
  --color-border-strong: #7a8380;
  --color-card-edge: #0d1211;
  --color-commit-hover: #1f2622;
  --color-commit-press: #050706;
  --color-danger: #c81e2d;
  --color-danger-hover: #d8333a;
  --color-danger-ink: #c81e2d;
  --color-danger-soft: #fde8e9;
  --color-dev-card-soft: #d5d9dc;
  --color-divider: #e4e8e6;
  --color-focus-ring: #1f64d8;
  --color-hover-wash: rgb(13 18 17 / 0.11);
  --color-info: #0b7590;
  --color-on-fill: #ffffff;
  --color-player-amber-ink: #8f5b00;
  --color-player-amber-rim: #6b4400;
  --color-player-azure-ink: #1f64d8;
  --color-player-crimson-ink: #b3132a;
  --color-player-ink-display: #000000;
  --color-player-ink-ink: #161b19;
  --color-player-lilac-display: #e0e0e0;
  --color-player-lilac-ink: #434c48;
  --color-player-mint-ink: #0b7558;
  --color-player-rose-ink: #b42f8c;
  --color-player-violet-ink: #6b4fa8;
  --color-res-brick: #a9532f;
  --color-res-brick-soft: #f8e7df;
  --color-res-any: #426782;
  --color-res-any-soft: #e1eaf0;
  --color-res-ore: #6e7880;
  --color-res-ore-soft: #ebeef0;
  --color-res-wheat: var(--color-accent);
  --color-res-wheat-soft: #faf1d6;
  --color-res-wood: #3c6a1e;
  --color-res-wood-soft: #e4eddc;
  --color-res-sheep: #86b43a;
  --color-res-sheep-soft: #e9f2db;
  --color-scrim: rgb(13 18 17 / 0.45);
  --color-selected: #0d1211;
  --color-success: #15803d;
  --color-success-hover: #00882c;
  --color-success-soft: #e3f4e8;
  --color-surface-field: #f4f6f5;
  --color-surface-glass-hover: rgb(255 255 255 / 0.82);
  --color-surface-inset: #f8faf9;
  --color-surface-muted: #edf0ee;
  --color-surface-panel: #ffffff;
  --color-surface-raised: #ffffff;
  --color-text: #0d1211;
  --color-text-muted: #646d69;
  --color-text-secondary: #434c48;
  --color-warning: #b45309;
  --color-warning-ink: #8e4424;
  --color-warning-soft: #fdebd9;

  --shadow-1: 0 1px 2px rgb(16 24 40 / 0.05), 0 4px 12px rgb(16 24 40 / 0.06);
  --shadow-2: 0 6px 22px rgb(16 24 40 / 0.09);
  --shadow-3: 0 18px 48px rgb(16 24 40 / 0.13);
  --shadow-panel: 0 1px 2px rgb(16 24 40 / 0.04), 0 10px 28px rgb(16 24 40 / 0.06);
  --shadow-lift: 0 0 0 1px var(--color-accent), 0 0 24px rgb(229 174 26 / 0.2);
  --dim-opacity: 0.35;

}

@media (max-width: 1439.98px) {
  :root {
    --endturn-h: 36px;
    --endturn-w: 132px;
  }
}

@media (min-width: 1728px) {
  :root {
    --grid-pad: 14px;
    --grid-gap: 16px;
    --stack-gap: 12px;
    --space-2_5: 12px;
    --row-topbar: 68px;
    --col-left: 348px;
    --panel-pad: 22px;
    --panel-header-h: 56px;
    --hand-pad-y: 7px;
    --row-hand: 106px;
    --endturn-h: 40px;
    --endturn-w: 184px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: var(--dur-instant);
    --dur-base: var(--dur-instant);
    --dur-slow: var(--dur-instant);
    --dur-dice-tumble: var(--dur-instant);
    --dur-build-fill: var(--dur-instant);
  }
}