/* Design tokens shared by every page. Values mirror Telegram's WebApp theme
   variables where possible (--tg-theme-*), with hand-picked fallbacks for
   browsers/desktop testing outside Telegram. */

:root {
  color-scheme: dark;

  /* --- Ocean palette (brand-neutral, swappable) --- */
  --ocean-950: #060d1a;
  --ocean-900: #0a1628;
  --ocean-800: #10203a;
  --ocean-700: #16304f;
  --ocean-600: #1d4266;
  --ocean-500: #2a5a86;

  --accent-400: #4fd8ff;
  --accent-500: #22c1ff;
  --accent-600: #0e9fe6;

  --gold-400: #ffd873;
  --gold-500: #ffc93c;
  --gold-600: #e6a80f;

  --success-500: #35d68a;
  --danger-500: #ff5c72;
  --warning-500: #ffb648;

  /* --- Rarity colors --- */
  --rarity-common: #9fb3c8;
  --rarity-uncommon: #4ade80;
  --rarity-rare: #38bdf8;
  --rarity-epic: #c084fc;
  --rarity-legendary: #fbbf24;
  --rarity-mythical: #fb7185;

  /* --- Semantic surface tokens --- */
  --bg-app: var(--tg-theme-bg-color, var(--ocean-950));
  --bg-surface: color-mix(in srgb, var(--ocean-800) 78%, transparent);
  --bg-surface-solid: var(--ocean-800);
  --bg-elevated: color-mix(in srgb, var(--ocean-700) 85%, transparent);
  --bg-card: color-mix(in srgb, #ffffff 6%, var(--ocean-800) 94%);

  --text-primary: var(--tg-theme-text-color, #eef4fb);
  --text-secondary: var(--tg-theme-hint-color, #93a6bd);
  --text-inverse: #04101f;

  --border-subtle: color-mix(in srgb, #ffffff 10%, transparent);
  --border-strong: color-mix(in srgb, #ffffff 18%, transparent);

  --shadow-soft: 0 8px 24px rgba(2, 8, 20, 0.35);
  --shadow-lift: 0 16px 40px rgba(2, 8, 20, 0.45);
  --shadow-glow-accent: 0 0 0 1px color-mix(in srgb, var(--accent-500) 45%, transparent),
    0 8px 28px color-mix(in srgb, var(--accent-500) 30%, transparent);
  --shadow-glow-gold: 0 0 0 1px color-mix(in srgb, var(--gold-500) 50%, transparent),
    0 8px 28px color-mix(in srgb, var(--gold-500) 35%, transparent);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;
  --space-7: 36px;

  --font-sans: "SF Pro Display", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;

  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --nav-height: 64px;
  --topbar-height: 56px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg-app: var(--tg-theme-bg-color, #eef3f9);
  --bg-surface: color-mix(in srgb, #ffffff 80%, transparent);
  --bg-surface-solid: #ffffff;
  --bg-elevated: color-mix(in srgb, #ffffff 90%, transparent);
  --bg-card: color-mix(in srgb, #ffffff 96%, var(--ocean-100, #dbe7f3) 4%);

  --text-primary: var(--tg-theme-text-color, #0b1626);
  --text-secondary: var(--tg-theme-hint-color, #5b6b80);
  --text-inverse: #ffffff;

  --border-subtle: color-mix(in srgb, #0b1626 8%, transparent);
  --border-strong: color-mix(in srgb, #0b1626 16%, transparent);

  --shadow-soft: 0 8px 24px rgba(20, 40, 70, 0.10);
  --shadow-lift: 0 16px 40px rgba(20, 40, 70, 0.14);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg-app: var(--tg-theme-bg-color, #eef3f9);
    --bg-surface: color-mix(in srgb, #ffffff 80%, transparent);
    --bg-surface-solid: #ffffff;
    --bg-elevated: color-mix(in srgb, #ffffff 90%, transparent);
    --bg-card: color-mix(in srgb, #ffffff 96%, var(--ocean-100, #dbe7f3) 4%);

    --text-primary: var(--tg-theme-text-color, #0b1626);
    --text-secondary: var(--tg-theme-hint-color, #5b6b80);
    --text-inverse: #ffffff;

    --border-subtle: color-mix(in srgb, #0b1626 8%, transparent);
    --border-strong: color-mix(in srgb, #0b1626 16%, transparent);

    --shadow-soft: 0 8px 24px rgba(20, 40, 70, 0.10);
    --shadow-lift: 0 16px 40px rgba(20, 40, 70, 0.14);
  }
}