/* ==========================================================================
   Guard the Tower 2D — variables.css
   Design tokens: colour palette, typography, shadows, glows, animation,
   responsive breakpoints.
   ========================================================================== */

:root {
  /* ------- Core palette -------
     Graphite and steel. The former gold/blue chrome is gone; the
     --c-gold-* tokens are kept as names so every existing rule keeps
     working, but they now resolve to the greys of the new theme. */
  --c-bg-deep:      #030304;
  --c-bg:           #0a0b0d;
  --c-bg-raised:    #16181c;
  --c-panel:        rgba(15, 16, 19, 0.93);
  --c-panel-solid:  #131519;
  --c-panel-border: rgba(168, 176, 188, 0.26);
  --c-panel-inner:  rgba(255, 255, 255, 0.05);
  /* Panel fills are opaque enough to read without a backdrop blur, which
     would force a full-screen re-rasterization on every animated frame. */
  --c-glass:        rgba(20, 22, 26, 0.9);
  --c-glass-strong: rgba(11, 12, 15, 0.97);

  /* Primary chrome accent (historically "gold"). */
  --c-gold:         #c2c8d2;
  --c-gold-bright:  #f0f3f8;
  --c-gold-dim:     #6b7280;
  --c-parchment:    #dfe3ea;
  --c-text:         #e6e9ef;
  --c-text-dim:     #9aa1ac;
  --c-text-faint:   #656b76;

  /* ------- Interactive states -------
     Green while hovered, amber while held: two clearly different
     answers so a press never looks like a hover. */
  --c-hover:        #3ddc84;
  --c-hover-soft:   rgba(61, 220, 132, 0.14);
  --c-press:        #ffa53c;
  --c-press-soft:   rgba(255, 165, 60, 0.2);

  --c-health:       #4cc964;
  --c-health-low:   #e04646;
  --c-shield:       #4ea8de;
  --c-mana:         #737a86;
  --c-danger:       #e04646;
  --c-danger-soft:  rgba(224, 70, 70, 0.18);
  --c-success:      #4cc964;
  --c-warning:      #f0a030;
  --c-frost:        #8fd6ff;
  --c-fire:         #ff7b39;
  --c-poison:       #86d94c;

  --c-elite:        #c85cff;
  --c-boss:         #ff4d4d;

  /* Accent trio driving the menu's animated gradients */
  --c-accent-a:     #b9c0cb;
  --c-accent-b:     #5b626e;
  --c-accent-c:     #8a919d;

  /*
    LIVE ACCENT. Set at runtime from the selected location's own palette
    (GT.UI.applyAccent), so the interface takes on the colour of the ground
    the player is about to fight over. Falls back to the neutral chrome.
  */
  --c-accent:       var(--c-gold);
  --c-accent-soft:  rgba(196, 204, 216, 0.12);

  /* Rarity ramp shared by draft cards and boon chips. */
  --c-common:       #9aa1ac;
  --c-uncommon:     #5fd6ff;
  --c-rare:         #c85cff;

  /*
    THREAT TEMPERATURE. `body[data-threat]` swaps this between steel, amber
    and red as the run gets closer to failure; every alert surface reads
    from it, so danger is communicated by colour before any number is read.
  */
  --c-threat:       var(--c-gold);
  --c-threat-soft:  rgba(196, 204, 216, 0.1);

  /* ------- Depth: a second, wider ambient layer under every surface ------- */
  --shadow-ao:      0 30px 70px -20px rgba(0, 0, 0, 0.85);
  --rim-light:      inset 0 1px 0 rgba(255, 255, 255, 0.11);
  --rim-light-soft: inset 0 1px 0 rgba(255, 255, 255, 0.07);

  /* ------- Typography ------- */
  --font-display: "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Cascadia Code", Consolas, Menlo, monospace;

  --fs-xs:   0.72rem;
  --fs-sm:   0.85rem;
  --fs-md:   1rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.7rem;
  --fs-2xl:  2.4rem;
  --fs-title: clamp(1.9rem, 5.6vw, 4.2rem);

  --ls-wide: 0.14em;

  /* ------- Shadows: layered for real depth ------- */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:    0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-btn:   0 4px 14px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-card:  0 6px 18px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(0, 0, 0, 0.45),
                  inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --shadow-panel: 0 18px 60px rgba(0, 0, 0, 0.65), 0 6px 20px rgba(0, 0, 0, 0.5),
                  inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --shadow-float: 0 26px 70px rgba(0, 0, 0, 0.7), 0 10px 26px rgba(0, 0, 0, 0.55);
  --shadow-inset: inset 0 2px 8px rgba(0, 0, 0, 0.6);
  --shadow-text:  0 2px 6px rgba(0, 0, 0, 0.8);
  --shadow-text-deep: 0 1px 0 rgba(0,0,0,0.6), 0 3px 10px rgba(0, 0, 0, 0.85),
                      0 8px 30px rgba(0, 0, 0, 0.7);

  /* ------- Glows ------- */
  --glow-gold:      0 0 18px rgba(196, 204, 216, 0.3);
  --glow-gold-lg:   0 0 12px rgba(200, 208, 220, 0.34), 0 0 34px rgba(180, 190, 205, 0.2),
                    0 0 68px rgba(160, 172, 190, 0.1);
  --glow-violet:    0 0 12px rgba(140, 148, 162, 0.42), 0 0 34px rgba(120, 128, 142, 0.24);
  --glow-cyan:      0 0 12px rgba(160, 170, 184, 0.42), 0 0 32px rgba(140, 150, 166, 0.22);
  --glow-danger:    0 0 12px rgba(224, 70, 70, 0.55), 0 0 34px rgba(224, 70, 70, 0.3);
  --glow-success:   0 0 12px rgba(76, 201, 100, 0.5), 0 0 30px rgba(76, 201, 100, 0.28);
  --glow-frost:     0 0 14px rgba(143, 214, 255, 0.55);
  --glow-text-gold: 0 0 14px rgba(210, 218, 230, 0.4), 0 0 40px rgba(180, 190, 205, 0.2);
  --glow-hover:     0 0 12px rgba(61, 220, 132, 0.5), 0 0 30px rgba(61, 220, 132, 0.26);
  --glow-press:     0 0 14px rgba(255, 165, 60, 0.6), 0 0 34px rgba(255, 165, 60, 0.28);

  /* ------- Borders / radius ------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --border-ornate: 1px solid var(--c-panel-border);

  /* ------- Animation ------- */
  --t-fast: 120ms;
  --t-med: 260ms;
  --t-slow: 480ms;
  --t-xslow: 900ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);

  /* ------- Layout ------- */
  --hud-pad: 14px;
  --ui-scale: 1;
  /* Set at runtime by GT.Viewport; scales the whole interface uniformly so
     landscape mobile mirrors the desktop layout. */
  --hud-scale: 1;
  --menu-scale: 1;
  /* Notch / rounded-corner insets, zero on devices without them. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  /* ------- Breakpoints (reference) ------- */
  --bp-mobile: 600px;
  --bp-tablet: 960px;
  --bp-desktop: 1280px;

  /* ------- Z layers ------- */
  --z-canvas: 1;
  --z-hud: 10;
  --z-overlay: 20;
  --z-modal: 30;
  --z-loading: 50;
}

/* ------- Threat states, driven from the HUD each frame ------- */
body[data-threat="1"] { --c-threat: #f0a030; --c-threat-soft: rgba(240, 160, 48, 0.14); }
body[data-threat="2"] { --c-threat: #ff8a3c; --c-threat-soft: rgba(255, 138, 60, 0.18); }
body[data-threat="3"] { --c-threat: #e04646; --c-threat-soft: rgba(224, 70, 70, 0.22); }

/* ------- High contrast accessibility theme ------- */
body.high-contrast {
  --c-panel:        rgba(0, 0, 0, 0.96);
  --c-glass:        rgba(0, 0, 0, 0.94);
  --c-glass-strong: rgba(0, 0, 0, 0.98);
  --c-panel-border: #ffffff;
  --c-text:         #ffffff;
  --c-text-dim:     #e0e0e0;
  --c-text-faint:   #bbbbbb;
  --c-gold:         #ffffff;
  --c-health:       #33ff77;
  --c-danger:       #ff5050;
}

/* ------- Colorblind-friendly palette ------- */
body.colorblind {
  --c-health:      #3db8ff;
  --c-health-low:  #ffb000;
  --c-danger:      #ffb000;
  --c-success:     #3db8ff;
  --c-elite:       #ffffff;
  --c-boss:        #ffb000;
}

/* ------- Reduced motion ------- */
body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001s !important;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-med: 1ms;
    --t-slow: 1ms;
    --t-xslow: 1ms;
  }
}