/* =============================================================================
   SubSurrender — Design Tokens (Phase 1)
   SINGLE SOURCE OF TRUTH for color, type, space, radius, elevation, motion.

   Rules for Phases 2–11 (see DESIGN-SYSTEM.md):
     • No raw hex values in component/page code. Consume tokens only.
     • Rarity colors are reserved for rarity. Never decorate unrelated UI.
     • Dark-mode elevation = glow + border, never gray drop shadows.

   This file is linked AFTER each page's inline <style>, so the legacy-variable
   remap at the bottom re-themes the entire existing app in one move.
   ========================================================================== */

:root {
  /* ---- 1.1 Core palette (red & black) -------------------------------- */
  --bg-0: #0A0A0C;            /* app background (near-black) */
  --bg-1: #121216;            /* surfaces, cards */
  --bg-2: #1A1A20;            /* raised surfaces, modals, inputs */
  --bg-3: #23232B;            /* hover states on surfaces */
  --border-subtle: #2A2A33;  /* hairline borders, dividers */

  --red-400: #F5304A;        /* accent hover / highlights */
  --red-500: #E11D2E;        /* PRIMARY accent — CTAs, active, focus */
  --red-600: #B3121F;        /* pressed states */
  --red-glow: rgba(225, 29, 46, 0.35);

  --text-primary: #F5EEF2;   /* headings, primary text (kept from brand) */
  --text-secondary: #B8B0B6; /* body, descriptions */
  --text-muted: #6E676C;     /* hints, timestamps, disabled */
  --text-on-accent: #FFFFFF; /* text/icons on red or bright rarity fills */

  --success: #34C77B;        /* confirmations, completed */
  --warning: #E8A13C;        /* cautions, expiring timers */
  --danger:  #FF4D5E;        /* errors, destructive (distinct from accent red) */
  --info:    #4DA3FF;        /* neutral information */

  /* Retired neon pink — kept only as an earnable cosmetic color (Phase 6+). */
  --cosmetic-pink: #FF2D9B;

  /* ---- 1.2 Rarity system — 6 tiers, WoW color language --------------- */
  --rarity-common:    #9D9D9D;  /* gray */
  --rarity-uncommon:  #1EFF00;  /* green */
  --rarity-rare:      #0070DD;  /* blue */
  --rarity-epic:      #A335EE;  /* purple */
  --rarity-legendary: #FF8000;  /* orange */
  --rarity-mythic:    #FF3F3F;  /* red — always paired with glow + badge */

  /* Tints: rarity color at ~10% over --bg-1 (tuned for contrast — see §6). */
  --rarity-common-tint:    color-mix(in srgb, var(--rarity-common)    9%, var(--bg-1));
  --rarity-uncommon-tint:  color-mix(in srgb, var(--rarity-uncommon)  8%, var(--bg-1));
  --rarity-rare-tint:      color-mix(in srgb, var(--rarity-rare)     11%, var(--bg-1));
  --rarity-epic-tint:      color-mix(in srgb, var(--rarity-epic)     11%, var(--bg-1));
  --rarity-legendary-tint: color-mix(in srgb, var(--rarity-legendary) 9%, var(--bg-1));
  --rarity-mythic-tint:    color-mix(in srgb, var(--rarity-mythic)   10%, var(--bg-1));

  /* Borders: solid, used at 1.5–2px by the card components. */
  --rarity-common-border:    #9D9D9D;
  --rarity-uncommon-border:  #1EFF00;
  --rarity-rare-border:      #0070DD;
  --rarity-epic-border:      #A335EE;
  --rarity-legendary-border: #FF8000;
  --rarity-mythic-border:    #FF3F3F;

  /* Glows: outer shadow color at ~35% opacity. */
  --rarity-common-glow:    rgba(157, 157, 157, 0.35);
  --rarity-uncommon-glow:  rgba(30, 255, 0, 0.35);
  --rarity-rare-glow:      rgba(0, 112, 221, 0.35);
  --rarity-epic-glow:      rgba(163, 53, 238, 0.35);
  --rarity-legendary-glow: rgba(255, 128, 0, 0.35);
  --rarity-mythic-glow:    rgba(255, 63, 63, 0.35);

  /* ---- 1.3 Typography ------------------------------------------------ */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --text-xs:   0.75rem;   --lh-xs:   1.4;
  --text-sm:   0.875rem;  --lh-sm:   1.5;
  --text-base: 1rem;      --lh-base: 1.6;
  --text-lg:   1.125rem;  --lh-lg:   1.5;
  --text-xl:   1.375rem;  --lh-xl:   1.3;   /* display face from here up */
  --text-2xl:  1.75rem;   --lh-2xl:  1.25;
  --text-3xl:  2.25rem;   --lh-3xl:  1.15;
  --text-4xl:  3rem;      --lh-4xl:  1.05;

  --tracking-tight: -0.01em;
  --tracking-display: 0.01em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- 1.4 Space, radius, elevation, motion ------------------------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px;  --space-8: 32px;  --space-12: 48px; --space-16: 64px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* Elevation = glow + border (no gray drop shadows in dark mode). */
  --elev-1: 0 0 0 1px var(--border-subtle);
  --elev-2: 0 0 0 1px var(--border-subtle), 0 0 18px -8px rgba(0, 0, 0, 0.8);
  --elev-3: 0 0 0 1px var(--border-subtle), 0 0 32px -6px rgba(0, 0, 0, 0.9),
            0 0 24px -10px var(--red-glow);

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 350ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* entrances */
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);    /* exits / general */

  --focus-ring: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--red-500);
}

/* =============================================================================
   LEGACY VARIABLE REMAP — the global facelift lever.
   The existing app (index/admin/landing/about/…) is entirely driven by the
   variables below. Redefining them in terms of the new tokens re-themes every
   existing rule at once without editing thousands of declarations.
   ========================================================================== */
:root {
  --black:        var(--bg-0);
  --deep:         var(--bg-1);
  --surface:      var(--bg-2);
  --surface2:     var(--bg-2);
  --border:       var(--border-subtle);
  --border2:      var(--bg-3);

  /* rose family → primary red accent */
  --rose:         var(--red-500);
  --rose-light:   var(--red-400);
  --rose-dim:     var(--red-600);

  /* purple was decorative + old rarity → fold into the red accent for core UI;
     true rarity comes from the .rarity-* overrides below. */
  --purple:       var(--red-500);
  --purple-light: var(--red-400);
  --purple-dim:   var(--red-600);

  /* gold was premium/legendary accent → map to legendary orange */
  --gold:         var(--rarity-legendary);
  --gold-dim:     #B35900;

  --cream:        var(--text-primary);
  --cream-dim:    var(--text-secondary);
  --muted:        var(--text-muted);
  --text:         var(--text-primary);
  --text-dim:     var(--text-secondary);

  --online:       var(--success);
  --shame:        var(--danger);
}

/* Type: re-point the legacy serif/Jost faces at the new game-menu faces.
   Headings used Cinzel/Cormorant; body used Jost. Override the families. */
body { font-family: var(--font-body); }

/* =============================================================================
   6-TIER RARITY OVERRIDE
   The inline styles define 5 tiers with ad-hoc colors and set the per-card
   `--rarity` variable. We override those to the canonical WoW palette and add
   the missing Mythic tier. Higher cascade position (loaded after inline) wins.
   ========================================================================== */
.rarity-common    { --rarity: var(--rarity-common); }
.rarity-uncommon  { --rarity: var(--rarity-uncommon); }
.rarity-rare      { --rarity: var(--rarity-rare); }
.rarity-epic      { --rarity: var(--rarity-epic); }
.rarity-legendary { --rarity: var(--rarity-legendary); }
.rarity-mythic    { --rarity: var(--rarity-mythic); }

/* Loot-drop cards in the existing markup set --rc; keep them in sync. */
.loot-drop-card.rarity-common    { --rc: var(--rarity-common);    border-top-color: var(--rarity-common); }
.loot-drop-card.rarity-uncommon  { --rc: var(--rarity-uncommon);  border-top-color: var(--rarity-uncommon); }
.loot-drop-card.rarity-rare      { --rc: var(--rarity-rare);      border-top-color: var(--rarity-rare); }
.loot-drop-card.rarity-epic      { --rc: var(--rarity-epic);      border-top-color: var(--rarity-epic); }
.loot-drop-card.rarity-legendary { --rc: var(--rarity-legendary); border-top-color: var(--rarity-legendary); }
.loot-drop-card.rarity-mythic    { --rc: var(--rarity-mythic);    border-top-color: var(--rarity-mythic); }

.loot-card.rarity-common    { border-left-color: var(--rarity-common); }
.loot-card.rarity-uncommon  { border-left-color: var(--rarity-uncommon); }
.loot-card.rarity-rare      { border-left-color: var(--rarity-rare); }
.loot-card.rarity-epic      { border-left-color: var(--rarity-epic); }
.loot-card.rarity-legendary { border-left-color: var(--rarity-legendary); }
.loot-card.rarity-mythic    { border-left-color: var(--rarity-mythic); }

.loot-rarity.rarity-common    { color: var(--rarity-common); }
.loot-rarity.rarity-uncommon  { color: var(--rarity-uncommon); }
.loot-rarity.rarity-rare      { color: var(--rarity-rare); }
.loot-rarity.rarity-epic      { color: var(--rarity-epic); }
.loot-rarity.rarity-legendary { color: var(--rarity-legendary); }
.loot-rarity.rarity-mythic    { color: var(--rarity-mythic); }

/* Legendary + mythic get the slow glow pulse; common→epic stay static.
   Reuses the existing per-card `--rarity` variable. */
@keyframes rarityPulse {
  0%, 100% { box-shadow: 0 0 14px -6px var(--rarity), inset 0 0 30px -24px var(--rarity); }
  50%      { box-shadow: 0 0 26px -2px var(--rarity), inset 0 0 30px -18px var(--rarity); }
}
.rarity-card.rarity-legendary,
.rarity-card.rarity-mythic {
  animation: rarityPulse 3s var(--ease-std) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .rarity-card.rarity-legendary,
  .rarity-card.rarity-mythic { animation: none; }
}