/* E-Bazarche semantic design tokens.
 *
 * This file is consumed by both the Angular application and the standalone
 * platform pages. Product styles should use the --ebz-* semantic names. The
 * short aliases at the end keep older game components working while they are
 * migrated incrementally.
 */
:root {
  color-scheme: light;

  --ebz-color-canvas-start: #7c3aed;
  --ebz-color-canvas-end: #2563eb;
  --ebz-color-surface: #ffffff;
  --ebz-color-surface-soft: #faf8ff;
  --ebz-color-surface-muted: #f3efff;
  --ebz-color-field: #ffffff;
  --ebz-color-text: #241b3f;
  --ebz-color-text-secondary: #6b6485;
  --ebz-color-text-muted: #9a93b5;
  --ebz-color-border: #e8e4f5;
  --ebz-color-primary: #7c3aed;
  --ebz-color-primary-hover: #5b21b6;
  --ebz-color-accent: #f59e0b;
  --ebz-color-danger: #ef4444;
  --ebz-color-success: #22c55e;
  --ebz-color-nav: rgba(255, 255, 255, 0.94);

  --ebz-font-family: 'Kalameh', Tahoma, sans-serif;
  --ebz-shell-height: 58px;
  --ebz-content-max: 1080px;
  --ebz-space-1: 4px;
  --ebz-space-2: 8px;
  --ebz-space-3: 12px;
  --ebz-space-4: 16px;
  --ebz-space-5: 20px;
  --ebz-space-6: 24px;
  --ebz-radius-sm: 6px;
  --ebz-radius-md: 8px;
  --ebz-radius-lg: 12px;
  --ebz-shadow-surface: 0 8px 24px rgba(20, 10, 60, 0.25);
  --ebz-shadow-menu: 0 18px 44px rgba(20, 10, 60, 0.16);
  --ebz-focus-ring: 0 0 0 3px rgba(124, 58, 237, 0.28);

  /* Legacy aliases used by the Angular client and the original static pages. */
  --bg1: var(--ebz-color-canvas-start);
  --bg2: var(--ebz-color-canvas-end);
  --surface: var(--ebz-color-surface);
  --surface-soft: var(--ebz-color-surface-soft);
  --surface-muted: var(--ebz-color-surface-muted);
  --field: var(--ebz-color-field);
  --panel: var(--ebz-color-surface);
  --ink: var(--ebz-color-text);
  --ink-secondary: var(--ebz-color-text-secondary);
  --ink-muted: var(--ebz-color-text-muted);
  --line: var(--ebz-color-border);
  --primary: var(--ebz-color-primary);
  --primary-strong: var(--ebz-color-primary-hover);
  --nav-surface: var(--ebz-color-nav);
  --accent: var(--ebz-color-accent);
  --danger: var(--ebz-color-danger);
  --ok: var(--ebz-color-success);
  --radius: 18px;
  --shadow: var(--ebz-shadow-surface);
  --ebz-bg1: var(--ebz-color-canvas-start);
  --ebz-bg2: var(--ebz-color-canvas-end);
  --ebz-surface: var(--ebz-color-surface);
  --ebz-soft: var(--ebz-color-surface-soft);
  --ebz-muted: var(--ebz-color-surface-muted);
  --ebz-field: var(--ebz-color-field);
  --ebz-ink: var(--ebz-color-text);
  --ebz-ink2: var(--ebz-color-text-secondary);
  --ebz-ink3: var(--ebz-color-text-muted);
  --ebz-line: var(--ebz-color-border);
  --ebz-primary: var(--ebz-color-primary);
  --ebz-primary2: var(--ebz-color-primary-hover);
  --ebz-nav: var(--ebz-color-nav);
  --ebz-shadow: var(--ebz-shadow-surface);

  --mat-sys-primary: var(--ebz-color-primary);
  --mat-sys-on-primary: #ffffff;
  --mat-sys-primary-container: var(--ebz-color-surface-muted);
  --mat-sys-on-primary-container: var(--ebz-color-primary-hover);
}

[data-theme="ocean"] {
  --ebz-color-canvas-start: #0ea5e9;
  --ebz-color-canvas-end: #2563eb;
  --ebz-color-primary: #0284c7;
  --ebz-color-primary-hover: #0369a1;
  --ebz-color-surface-muted: #e0f2fe;
  --ebz-color-accent: #06b6d4;
  --ebz-focus-ring: 0 0 0 3px rgba(2, 132, 199, 0.28);
}

[data-theme="sunset"] {
  --ebz-color-canvas-start: #f97316;
  --ebz-color-canvas-end: #db2777;
  --ebz-color-primary: #ea580c;
  --ebz-color-primary-hover: #c2410c;
  --ebz-color-surface-muted: #fff1e6;
  --ebz-color-accent: #fb923c;
  --ebz-focus-ring: 0 0 0 3px rgba(234, 88, 12, 0.28);
}

[data-theme="forest"] {
  --ebz-color-canvas-start: #059669;
  --ebz-color-canvas-end: #0891b2;
  --ebz-color-primary: #059669;
  --ebz-color-primary-hover: #047857;
  --ebz-color-surface-muted: #dcfce7;
  --ebz-color-accent: #34d399;
  --ebz-focus-ring: 0 0 0 3px rgba(5, 150, 105, 0.28);
}

[data-theme="rose"] {
  --ebz-color-canvas-start: #ec4899;
  --ebz-color-canvas-end: #a855f7;
  --ebz-color-primary: #db2777;
  --ebz-color-primary-hover: #be185d;
  --ebz-color-surface-muted: #fce7f3;
  --ebz-color-accent: #f472b6;
  --ebz-focus-ring: 0 0 0 3px rgba(219, 39, 119, 0.28);
}

[data-theme="candy"] {
  --ebz-color-canvas-start: #f472b6;
  --ebz-color-canvas-end: #38bdf8;
  --ebz-color-primary: #db2777;
  --ebz-color-primary-hover: #be185d;
  --ebz-color-surface-muted: #fce7f3;
  --ebz-color-accent: #fbbf24;
  --ebz-focus-ring: 0 0 0 3px rgba(219, 39, 119, 0.28);
}

[data-theme="midnight"] {
  --ebz-color-canvas-start: #0f172a;
  --ebz-color-canvas-end: #334155;
  --ebz-color-primary: #2563eb;
  --ebz-color-primary-hover: #1d4ed8;
  --ebz-color-surface-muted: #e0f2fe;
  --ebz-color-accent: #38bdf8;
  --ebz-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

[data-theme="dev"] {
  color-scheme: dark;
  --ebz-color-canvas-start: #0d0a17;
  --ebz-color-canvas-end: #1b1030;
  --ebz-color-surface: #16121f;
  --ebz-color-surface-soft: #1e1830;
  --ebz-color-surface-muted: #2a2239;
  --ebz-color-field: #110e19;
  --ebz-color-text: #f8f7ff;
  --ebz-color-text-secondary: #c5bdd8;
  --ebz-color-text-muted: #a99fc4;
  --ebz-color-border: #393047;
  --ebz-color-primary: #f59e0b;
  --ebz-color-primary-hover: #fbbf24;
  --ebz-color-nav: rgba(19, 15, 28, 0.94);
  --ebz-color-accent: #f59e0b;
  --ebz-shadow-surface: 0 12px 30px rgba(0, 0, 0, 0.46);
  --ebz-shadow-menu: 0 18px 44px rgba(0, 0, 0, 0.5);
  --ebz-focus-ring: 0 0 0 3px rgba(245, 158, 11, 0.32);
  --mat-sys-surface: var(--ebz-color-surface);
  --mat-sys-on-surface: var(--ebz-color-text);
  --mat-sys-on-surface-variant: var(--ebz-color-text-secondary);
  --mat-sys-outline: var(--ebz-color-border);
  --mat-sys-on-primary: #17111f;
}