/* =============================================================================
   themes.css - Color palettes exposed as CSS custom properties.

   Reference: `.docs/main.md` section 3.F and `.docs/steps/1.md` point 2.

   Every theme declares the exact same variable set, so `css/base.css` and the view
   stylesheets never contain a hard-coded color. Adding a theme means:
     1. adding a block below (and, when needed, the `color-scheme` hint);
     2. declaring it in `settings/config.json` under `themes`.

   Dark is the default: it is declared on `:root` so the very first paint (before the inline
   bootstrap script of `index.html`) is already dark and no flash occurs.

   The palettes are also declared on `body[data-theme="…"]` because `ThemeManager` sets the
   attribute on both `<html>` and `<body>`; both selectors must therefore stay in sync.
   ============================================================================= */

:root,
body[data-theme="dark"],
:root[data-theme="dark"] body {
  color-scheme: dark;

  /* The icon files (`assets/img/pin.png`, `unpin.png`, `edit.png`) are pure black glyphs, so they
     follow the palette: inverted on the dark theme, left alone on the two light ones. */
  --icon-filter: invert(1);

  /* The interface icons that ship in two inks (`daily_boosters`, `bonus_booster`, `binders`):
     `dark` asks `js/utils/ThemeIcons.js` for the `_dark` file, `light` for the black one. The
     value lives HERE, beside the background it has to be read on, so a dark palette added later is
     one more block and no JavaScript. `--icon-ink` is the same decision for the glyphs that are
     drawn inline (the sparkle of the Mine Pick, the gift of the daily rewards) and therefore
     cannot be swapped for a file: they take this colour as their stroke. */
  --icon-variant: dark;
  --icon-ink: #ffffff;

  --color-bg: #0b0e14;
  --color-bg-elevated: #10141d;
  --color-surface: #151a24;
  --color-surface-alt: #1d2432;
  --color-border: #2a3346;
  --color-text: #e8edf7;
  --color-text-muted: #94a2bc;
  --color-accent: #6c8cff;
  --color-accent-hover: #8aa4ff;
  --color-accent-contrast: #0a0f1c;
  --color-success: #3ddc84;
  --color-error: #ff6272;
  --color-warning: #ffc857;
  /* The yellow of a player TITLE (`css/views/titles.css`, `css/views/profile.css`): the line under
     the pseudo and the title rows of the titles page. Its own token rather than `--color-warning`:
     a title must keep reading as a reward whatever a future palette does to the warning tone. */
  --color-title: #ffd54a;

  --glow-accent: 0 0 12px rgba(108, 140, 255, 0.45);
  --glow-rarity-4: 0 0 14px rgba(120, 200, 255, 0.55);
  --glow-rarity-5: 0 0 18px rgba(255, 200, 90, 0.65);

  /* Foil of the legendary/mythic shine (`css/components/card-shine.css`). The foil is WHITE light:
     the four first tokens differ only in strength, not in hue, and they are what draws the shapes
     (bloom, glints, hexagon lattice, embossed dot grid) of a printing.
       --shine      the heart of a glint, the peak of a band;
       --shine-soft the wide halo around it;
       --foil-mid   the middle strength - glints, honeycomb;
       --foil-faint the micro relief - embossing, dot grid, barely there;
       --foil-shade the dark side of the bevel, the only one that is not white: it is a shadow. */
  --shine: rgba(255, 255, 255, 0.85);
  --shine-soft: rgba(255, 255, 255, 0.22);
  --foil-mid: rgba(255, 255, 255, 0.5);
  --foil-faint: rgba(255, 255, 255, 0.13);
  --foil-shade: rgba(0, 0, 0, 0.38);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --overlay: rgba(4, 7, 14, 0.72);
}

body[data-theme="light"],
:root[data-theme="light"] body {
  color-scheme: light;

  --icon-filter: none;

  --icon-variant: light;
  --icon-ink: #000000;

  --color-bg: #eef1f8;
  --color-bg-elevated: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: #e4e9f4;
  --color-border: #c9d2e4;
  --color-text: #121a2b;
  --color-text-muted: #5c6a86;
  --color-accent: #3b5bdb;
  --color-accent-hover: #2f49b0;
  --color-accent-contrast: #ffffff;
  --color-success: #0f9d58;
  --color-error: #d93025;
  --color-warning: #b7791f;
  /* The pale surfaces of the light theme need a title yellow dark enough to stay readable (see the
     dark palette for what this token is). */
  --color-title: #a8790a;

  --glow-accent: 0 0 10px rgba(59, 91, 219, 0.35);
  --glow-rarity-4: 0 0 12px rgba(38, 139, 210, 0.45);
  --glow-rarity-5: 0 0 16px rgba(214, 158, 46, 0.55);

  /* The foil stays white on a light palette (`css/components/card-shine.css`): a white reflection
     on a pale surface reads through its shapes and its bevel, so `--foil-shade` carries more of the
     effect here than it does on the dark theme. */
  --shine: rgba(255, 255, 255, 0.95);
  --shine-soft: rgba(255, 255, 255, 0.32);
  --foil-mid: rgba(255, 255, 255, 0.55);
  --foil-faint: rgba(255, 255, 255, 0.18);
  --foil-shade: rgba(18, 26, 43, 0.3);

  --shadow-sm: 0 1px 2px rgba(18, 26, 43, 0.12);
  --shadow-md: 0 10px 26px rgba(18, 26, 43, 0.16);
  --overlay: rgba(18, 26, 43, 0.45);
}

body[data-theme="classic"],
:root[data-theme="classic"] body {
  color-scheme: light;

  --icon-filter: none;

  --icon-variant: light;
  --icon-ink: #000000;

  --color-bg: #efe3c8;
  --color-bg-elevated: #fbf4e4;
  --color-surface: #fbf4e4;
  --color-surface-alt: #e3d3b3;
  --color-border: #b9a279;
  --color-text: #2f2415;
  --color-text-muted: #6b5636;
  --color-accent: #a5541f;
  --color-accent-hover: #8d4418;
  --color-accent-contrast: #fdf6e6;
  --color-success: #4f7a2b;
  --color-error: #a52318;
  --color-warning: #b8860b;
  /* Goldenrod against the parchment of the classic palette (see the dark palette for what this
     token is). */
  --color-title: #8a6a12;

  --glow-accent: 0 0 10px rgba(165, 84, 31, 0.35);
  --glow-rarity-4: 0 0 12px rgba(47, 111, 168, 0.45);
  --glow-rarity-5: 0 0 16px rgba(180, 132, 20, 0.6);

  --shine: rgba(255, 250, 236, 0.9);
  --shine-soft: rgba(255, 250, 236, 0.28);
  --foil-mid: rgba(255, 250, 236, 0.55);
  --foil-faint: rgba(255, 250, 236, 0.17);
  --foil-shade: rgba(47, 36, 21, 0.32);

  --shadow-sm: 0 1px 2px rgba(47, 36, 21, 0.18);
  --shadow-md: 0 10px 26px rgba(47, 36, 21, 0.2);
  --overlay: rgba(47, 36, 21, 0.5);
}

/* Day sky.

   A Minecraft-like daylight: a blue sky behind the app, with blocky clouds drifting across it.
   The palette itself stays light so every surface keeps its contrast over the sky. */
body[data-theme="day"],
:root[data-theme="day"] body {
  color-scheme: light;

  --icon-filter: none;

  --icon-variant: light;
  --icon-ink: #000000;

  --color-bg: #7fc0ea;
  --color-bg-elevated: #f4fbff;
  --color-surface: #ffffff;
  --color-surface-alt: #dceefb;
  --color-border: #a9c9dd;
  --color-text: #10263a;
  --color-text-muted: #2f4f66;
  --color-accent: #1d6fb8;
  --color-accent-hover: #155a99;
  --color-accent-contrast: #ffffff;
  --color-success: #127a4b;
  --color-error: #c0392b;
  --color-warning: #a86b00;
  --color-title: #8a5a00;

  --glow-accent: 0 0 10px rgba(29, 111, 184, 0.35);
  --glow-rarity-4: 0 0 12px rgba(38, 139, 210, 0.45);
  --glow-rarity-5: 0 0 16px rgba(214, 158, 46, 0.55);

  --shine: rgba(255, 255, 255, 0.95);
  --shine-soft: rgba(255, 255, 255, 0.32);
  --foil-mid: rgba(255, 255, 255, 0.55);
  --foil-faint: rgba(255, 255, 255, 0.18);
  --foil-shade: rgba(16, 38, 58, 0.3);

  --shadow-sm: 0 1px 2px rgba(16, 38, 58, 0.12);
  --shadow-md: 0 10px 26px rgba(16, 38, 58, 0.18);
  --overlay: rgba(16, 38, 58, 0.45);
}

body[data-theme="day"] {
  background: linear-gradient(180deg, #4f9fd5 0%, #7fc0ea 45%, #b9e2f8 100%) fixed;
}

/* Night sky.

   A deep blue that fades to black towards the top, dotted with stars. Same contract as every
   other palette: a full set of tokens, so no view needs to know which theme is active. */
body[data-theme="night"],
:root[data-theme="night"] body {
  color-scheme: dark;

  --icon-filter: invert(1);

  --icon-variant: dark;
  --icon-ink: #ffffff;

  --color-bg: #050b1c;
  --color-bg-elevated: #0b1224;
  --color-surface: #0d1730;
  --color-surface-alt: #152139;
  --color-border: #24324f;
  --color-text: #e8efff;
  --color-text-muted: #93a2c4;
  --color-accent: #7fa5ff;
  --color-accent-hover: #a0bcff;
  --color-accent-contrast: #050b1a;
  --color-success: #4ade80;
  --color-error: #ff6b7d;
  --color-warning: #ffd166;
  --color-title: #ffe066;

  --glow-accent: 0 0 12px rgba(127, 165, 255, 0.5);
  --glow-rarity-4: 0 0 14px rgba(120, 200, 255, 0.6);
  --glow-rarity-5: 0 0 18px rgba(255, 200, 90, 0.7);

  --shine: rgba(255, 255, 255, 0.88);
  --shine-soft: rgba(255, 255, 255, 0.24);
  --foil-mid: rgba(255, 255, 255, 0.5);
  --foil-faint: rgba(255, 255, 255, 0.14);
  --foil-shade: rgba(0, 0, 0, 0.4);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 10px 26px rgba(0, 0, 0, 0.5);
  --overlay: rgba(2, 4, 12, 0.78);
}

body[data-theme="night"] {
  background: linear-gradient(to top, #0d2350 0%, #050b1c 55%, #000000 100%) fixed;
}

/* --- Decorative layer of the two sky themes ------------------------------- */

.theme-scenery {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* The application keeps its own stacking context above the sky. The header and the bottom bar
   already sit at their own z-index; only the main column needed one. */
body[data-theme="day"] .app-main,
body[data-theme="night"] .app-main {
  position: relative;
  z-index: 1;
}

.theme-scenery__cloud {
  position: absolute;
  left: 0;
  display: block;
  background-color: #ffffff;
  border-radius: 8px;
  animation: theme-cloud-drift linear infinite;
  will-change: transform;
}

/* Two pale blocks stacked on the rectangle give the cloud its blocky, Minecraft silhouette. */
.theme-scenery__cloud::before,
.theme-scenery__cloud::after {
  content: '';
  position: absolute;
  bottom: 100%;
  background-color: inherit;
  border-radius: 8px 8px 0 0;
}

.theme-scenery__cloud::before {
  left: 8%;
  width: 52%;
  height: 62%;
}

.theme-scenery__cloud::after {
  right: 10%;
  width: 38%;
  height: 100%;
}

@keyframes theme-cloud-drift {
  from {
    transform: translate3d(-40vw, 0, 0);
  }
  to {
    transform: translate3d(140vw, 0, 0);
  }
}

.theme-scenery__star {
  position: absolute;
  display: block;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 0 6px rgba(190, 215, 255, 0.9);
  opacity: var(--star-opacity, 0.7);
  animation: theme-star-twinkle ease-in-out infinite alternate;
}

@keyframes theme-star-twinkle {
  from {
    opacity: var(--star-opacity, 0.7);
    transform: scale(1);
  }
  to {
    opacity: calc(var(--star-opacity, 0.7) * 0.3);
    transform: scale(0.7);
  }
}

/* Reduced motion keeps the decoration but freezes it: the negative delays already spread the
   clouds across the sky, so a paused animation reads as a still picture, not as a pile. */
@media (prefers-reduced-motion: reduce) {
  .theme-scenery__cloud,
  .theme-scenery__star {
    animation-play-state: paused;
  }
}

/* Promo cards.

   Declared once on `:root` as well: a promo card is a promo card in every palette, and the chip
   that flags it in the collection must stay recognisable whatever the theme. A mid-tone violet,
   readable on the dark and on the light surfaces. */
:root {
  --color-promo: #8b5cf6;
}

/* Rarity rings.

   Declared once on `:root` for the same reason as the trophy medals below: they are NOT theme
   colors. A legendary card is ringed in gold, a mythic one in pink and a super rare one in purple
   in the dark, light and classic palettes alike, so a ring always means the same rarity. Mid-tone
   values, readable on the dark and on the light surfaces. */
:root {
  --color-rarity-super: #a855f7;
  --color-rarity-legendary: #e0a63a;
  --color-rarity-mythic: #f472b6;
}

/* Trophy medals (bronze -> emerald).

   Declared once on `:root` because they are NOT theme colors: a bronze trophy is bronze in the
   dark, light and classic palettes, exactly like `--glow-rarity-*` above. The values are mid-tone
   on purpose, so the badge stays readable on the dark and on the light surfaces. */
:root {
  --color-trophy-bronze: #b06a20;
  --color-trophy-silver: #8b98a8;
  --color-trophy-gold: #c99117;
  --color-trophy-diamond: #2f8fbf;
  --color-trophy-emerald: #1f9d63;
}