/* ============================================================
   Legion Comps — Elevation, Radii, Borders, Motion
   Flatter, softer shadows. No ambient gold glow on resting
   elements (reserved for genuine "legendary win" moments).
   ============================================================ */

:root {
  /* ---- Corner radii ---- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ---- Border widths ---- */
  --border-hair: 1px;
  --border-1:    1.5px;
  --border-2:    2px;
  --accent-bar:  3px;

  /* ---- Shadows ---- */
  --shadow-xs:  0 1px 2px rgba(40, 33, 20, 0.05);
  --shadow-sm:  0 1px 3px rgba(40, 33, 20, 0.07), 0 1px 2px rgba(40, 33, 20, 0.04);
  --shadow-md:  0 4px 14px rgba(40, 33, 20, 0.08), 0 2px 4px rgba(40, 33, 20, 0.04);
  --shadow-lg:  0 12px 30px rgba(40, 33, 20, 0.10), 0 4px 8px rgba(40, 33, 20, 0.05);
  --shadow-xl:  0 24px 56px rgba(30, 24, 14, 0.14);
  --shadow-dark: 0 16px 40px rgba(0, 0, 0, 0.45);

  --ring-gold:    inset 0 0 0 1px rgba(212, 175, 55, 0.55);
  --ring-crimson: inset 0 0 0 1px rgba(200, 35, 59, 0.45);
  --glow-legendary: 0 0 0 1px rgba(212,175,55,0.6), 0 0 28px rgba(212,175,55,0.45), 0 0 60px rgba(212,175,55,0.2);

  /* ---- Component shape & depth (theme contract — see docs/site-theming.md) ----
     Components use these, not the raw radii/shadows above, so a theme can
     square every corner or swap soft shadows for hard pixel offsets. */
  --radius-btn:    var(--radius-md);
  --radius-input:  var(--radius-md);
  --radius-media:  var(--radius-md);
  --radius-card:   var(--radius-lg);
  --radius-panel:  var(--radius-xl);
  --radius-chip:   var(--radius-pill);
  --radius-badge:  var(--radius-pill);

  --shadow-card:       var(--shadow-sm);
  --shadow-card-hover: var(--shadow-lg);
  --shadow-btn:        var(--shadow-sm);
  --shadow-btn-hover:  var(--shadow-md);
  --shadow-modal:      var(--shadow-xl);
  --shadow-bar-up:     0 -6px 20px rgba(10, 10, 15, 0.10);   /* sticky bottom bar */
  --bevel:             0 0 0 0 transparent;   /* pixel themes: inset highlight + shade */

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;
  --dur-entrance:520ms;
}

@keyframes lc-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}