/* 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,
[data-theme="normal"] {
  color-scheme: light;

  --ebz-color-canvas-start: #6d28d9;
  --ebz-color-canvas-end: #2563eb;
  --ebz-color-surface: #ffffff;
  --ebz-color-surface-soft: #f8fafc;
  --ebz-color-surface-muted: #eef2ff;
  --ebz-color-field: #ffffff;
  --ebz-color-text: #25233a;
  --ebz-color-text-secondary: #625f78;
  --ebz-color-text-muted: #8d89a3;
  --ebz-color-border: #e3e1ee;
  --ebz-color-primary: #6d28d9;
  --ebz-color-primary-hover: #5b21b6;
  --ebz-color-on-primary: #ffffff;
  --ebz-color-accent: #f59e0b;
  --ebz-color-danger: #dc2626;
  --ebz-color-danger-hover: #b91c1c;
  --ebz-color-on-danger: #ffffff;
  --ebz-color-success: #16a34a;
  --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: 9px;
  --ebz-radius-md: 13px;
  --ebz-radius-lg: 19px;
  --ebz-shadow-surface: 0 1px 2px rgba(31, 28, 61, 0.08), 0 9px 24px rgba(31, 28, 61, 0.12), 0 24px 54px rgba(31, 28, 61, 0.08);
  --ebz-shadow-surface-hover: 0 2px 5px rgba(31, 28, 61, 0.09), 0 14px 34px rgba(31, 28, 61, 0.16), 0 30px 66px rgba(31, 28, 61, 0.1);
  --ebz-shadow-menu: 0 2px 5px rgba(31, 28, 61, 0.08), 0 18px 48px rgba(31, 28, 61, 0.16), 0 36px 80px rgba(31, 28, 61, 0.08);
  --ebz-edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  --ebz-focus-ring: 0 0 0 3px rgba(109, 40, 217, 0.25);

  /* 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: var(--ebz-color-on-primary);
  --mat-sys-primary-container: var(--ebz-color-surface-muted);
  --mat-sys-on-primary-container: var(--ebz-color-primary-hover);
  --mat-sys-surface: var(--ebz-color-surface);
  --mat-sys-surface-container: var(--ebz-color-surface-soft);
  --mat-sys-surface-container-high: var(--ebz-color-surface-muted);
  --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-error: var(--ebz-color-danger);
  --mat-sys-on-error: var(--ebz-color-on-danger);
}

[data-theme="ocean"] {
  color-scheme: light;
  --ebz-color-canvas-start: #0369a1;
  --ebz-color-canvas-end: #0f766e;
  --ebz-color-surface: #ffffff;
  --ebz-color-surface-soft: #f0fdfa;
  --ebz-color-surface-muted: #dff6f5;
  --ebz-color-field: #f8ffff;
  --ebz-color-text: #143341;
  --ebz-color-text-secondary: #486977;
  --ebz-color-text-muted: #7895a0;
  --ebz-color-border: #cfe8e8;
  --ebz-color-primary: #0369a1;
  --ebz-color-primary-hover: #075985;
  --ebz-color-on-primary: #ffffff;
  --ebz-color-accent: #0d9488;
  --ebz-color-danger: #dc2626;
  --ebz-color-danger-hover: #b91c1c;
  --ebz-color-on-danger: #ffffff;
  --ebz-color-success: #15803d;
  --ebz-color-nav: rgba(247, 254, 255, 0.95);
  --ebz-shadow-surface: 0 1px 2px rgba(4, 70, 91, 0.08), 0 9px 24px rgba(4, 70, 91, 0.13), 0 24px 54px rgba(4, 70, 91, 0.08);
  --ebz-shadow-surface-hover: 0 2px 5px rgba(4, 70, 91, 0.1), 0 14px 34px rgba(4, 70, 91, 0.18), 0 30px 66px rgba(4, 70, 91, 0.1);
  --ebz-shadow-menu: 0 2px 5px rgba(4, 70, 91, 0.08), 0 18px 48px rgba(4, 70, 91, 0.17), 0 36px 80px rgba(4, 70, 91, 0.09);
  --ebz-focus-ring: 0 0 0 3px rgba(3, 105, 161, 0.26);
}

[data-theme="rose"] {
  color-scheme: light;
  --ebz-color-canvas-start: #be123c;
  --ebz-color-canvas-end: #db2777;
  --ebz-color-surface: #fffdfd;
  --ebz-color-surface-soft: #fff5f7;
  --ebz-color-surface-muted: #ffe4e9;
  --ebz-color-field: #fffafa;
  --ebz-color-text: #431c2a;
  --ebz-color-text-secondary: #79505f;
  --ebz-color-text-muted: #a37c89;
  --ebz-color-border: #f1cdd6;
  --ebz-color-primary: #be123c;
  --ebz-color-primary-hover: #9f1239;
  --ebz-color-on-primary: #ffffff;
  --ebz-color-accent: #c026d3;
  --ebz-color-danger: #dc2626;
  --ebz-color-danger-hover: #b91c1c;
  --ebz-color-on-danger: #ffffff;
  --ebz-color-success: #15803d;
  --ebz-color-nav: rgba(255, 250, 251, 0.95);
  --ebz-shadow-surface: 0 1px 2px rgba(100, 20, 48, 0.08), 0 9px 24px rgba(100, 20, 48, 0.13), 0 24px 54px rgba(100, 20, 48, 0.08);
  --ebz-shadow-surface-hover: 0 2px 5px rgba(100, 20, 48, 0.1), 0 14px 34px rgba(100, 20, 48, 0.18), 0 30px 66px rgba(100, 20, 48, 0.1);
  --ebz-shadow-menu: 0 2px 5px rgba(100, 20, 48, 0.08), 0 18px 48px rgba(100, 20, 48, 0.17), 0 36px 80px rgba(100, 20, 48, 0.09);
  --ebz-focus-ring: 0 0 0 3px rgba(190, 18, 60, 0.24);
}

[data-theme="professional"] {
  color-scheme: dark;
  --ebz-color-canvas-start: #111416;
  --ebz-color-canvas-end: #20272b;
  --ebz-color-surface: #181d20;
  --ebz-color-surface-soft: #20272b;
  --ebz-color-surface-muted: #2a3338;
  --ebz-color-field: #111619;
  --ebz-color-text: #f1f5f7;
  --ebz-color-text-secondary: #b8c3c8;
  --ebz-color-text-muted: #89979e;
  --ebz-color-border: #39464c;
  --ebz-color-primary: #22d3ee;
  --ebz-color-primary-hover: #67e8f9;
  --ebz-color-on-primary: #083344;
  --ebz-color-accent: #4ade80;
  --ebz-color-danger: #f43f5e;
  --ebz-color-danger-hover: #fb7185;
  --ebz-color-on-danger: #ffffff;
  --ebz-color-success: #4ade80;
  --ebz-color-nav: rgba(19, 24, 27, 0.95);
  --ebz-shadow-surface: 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 4px rgba(0, 0, 0, 0.32), 0 14px 34px rgba(0, 0, 0, 0.38), 0 32px 70px rgba(0, 0, 0, 0.22);
  --ebz-shadow-surface-hover: 0 1px 0 rgba(255, 255, 255, 0.055), 0 4px 8px rgba(0, 0, 0, 0.34), 0 20px 46px rgba(0, 0, 0, 0.46), 0 40px 84px rgba(0, 0, 0, 0.26);
  --ebz-shadow-menu: 0 1px 0 rgba(255, 255, 255, 0.055), 0 4px 10px rgba(0, 0, 0, 0.4), 0 22px 58px rgba(0, 0, 0, 0.56), 0 44px 90px rgba(0, 0, 0, 0.3);
  --ebz-edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  --ebz-focus-ring: 0 0 0 3px rgba(34, 211, 238, 0.28);
}

/* Illustrated assets are a title treatment across the platform. Keep them
   beside the heading and close to the text's scale. */
.ebz-illustrated-title {
  --ebz-title-icon-size: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
}
h2.ebz-illustrated-title { --ebz-title-icon-size: 23px; }
h3.ebz-illustrated-title { --ebz-title-icon-size: 20px; }
.ebz-illustrated-title.ebz-centered { justify-content: center; }
.ebz-title-icon {
  width: var(--ebz-title-icon-size);
  height: var(--ebz-title-icon-size);
  flex: 0 0 var(--ebz-title-icon-size);
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(36, 27, 63, .16));
  transform-origin: 58% 64%;
  animation: ebz-title-icon-in .5s cubic-bezier(.2,.9,.25,1.35) both;
  transition: transform .24s cubic-bezier(.2,.9,.25,1.25), filter .24s ease;
}
.ebz-illustrated-title:hover .ebz-title-icon {
  transform: translateY(-2px) rotate(-5deg) scale(1.07);
  filter: drop-shadow(0 5px 5px rgba(36, 27, 63, .22));
}
@keyframes ebz-title-icon-in {
  from { opacity: 0; transform: translateY(7px) rotate(8deg) scale(.68); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ebz-title-icon { animation: none; }
}