/* ── Light language: rarity is light ────────────────────────────────────
   Colors mirror lib/rarity.ts. Set data-rarity="CLASSIFIED" on any element
   to get --rc / --rc-glow / --rc-soft / --rc-intensity / --rc-spread. */
:root {
  --rarity-consumer: #b0c3d9;
  --rarity-industrial: #5e98d9;
  --rarity-mil-spec: #4b69ff;
  --rarity-restricted: #8847ff;
  --rarity-classified: #d32ce6;
  --rarity-covert: #eb4b4b;
  --rarity-gold-tier: #e4ae39;

  /* Elevation: flat, card, popover, overlay */
  --elev-0: none;
  --elev-1: 0 1px 0 rgba(255, 223, 168, .06) inset, 0 6px 18px -8px rgba(0, 0, 0, .55);
  --elev-2: 0 1px 0 rgba(255, 223, 168, .08) inset, 0 18px 40px -16px rgba(0, 0, 0, .7);
  --elev-3: 0 1px 0 rgba(255, 223, 168, .1) inset, 0 32px 80px -24px rgba(0, 0, 0, .85);

  /* One glass recipe for every translucent panel */
  --glass-bg: color-mix(in srgb, var(--bg) 72%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--bg) 88%, transparent);
  --glass-blur: 14px;
  --glass-border: var(--border-subtle);

  /* Motion */
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out-soft: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-slow: 520ms;
  --dur-reveal: 900ms;
  --stagger: 60ms;

  /* Fluid type (new names; existing --fs-* untouched) */
  --fs-fluid-hero: clamp(32px, 5.2vw + 8px, 72px);
  --fs-fluid-h1: clamp(26px, 2.6vw + 12px, 44px);
  --fs-fluid-h2: clamp(20px, 1.4vw + 12px, 30px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-reveal: 1ms;
    --stagger: 0ms;
  }
}

/* Intensity 0..1 drives glow alpha; spread is the glow radius in px. */
[data-rarity] {
  --rc: var(--rarity-mil-spec);
  --rc-intensity: .4;
  --rc-spread: 18px;
}
[data-rarity="CONSUMER"]   { --rc: var(--rarity-consumer);    --rc-intensity: .12; --rc-spread: 8px; }
[data-rarity="INDUSTRIAL"] { --rc: var(--rarity-industrial);  --rc-intensity: .22; --rc-spread: 12px; }
[data-rarity="MIL_SPEC"]   { --rc: var(--rarity-mil-spec);    --rc-intensity: .34; --rc-spread: 16px; }
[data-rarity="RESTRICTED"] { --rc: var(--rarity-restricted);  --rc-intensity: .5;  --rc-spread: 24px; }
[data-rarity="CLASSIFIED"] { --rc: var(--rarity-classified);  --rc-intensity: .68; --rc-spread: 34px; }
[data-rarity="COVERT"]     { --rc: var(--rarity-covert);      --rc-intensity: .85; --rc-spread: 44px; }
[data-rarity="GOLD"]       { --rc: var(--rarity-gold-tier);   --rc-intensity: 1;   --rc-spread: 60px; }
[data-rarity] {
  --rc-soft: color-mix(in srgb, var(--rc) calc(var(--rc-intensity) * 28%), transparent);
  --rc-glow: color-mix(in srgb, var(--rc) calc(var(--rc-intensity) * 70%), transparent);
}
/* Reusable light/depth primitives built on casecrow-tokens.css. */

.cc-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
}
.cc-glass--strong { background: var(--glass-bg-strong); box-shadow: var(--elev-2); }

/* Rarity light: ring + halo. Use with data-rarity on the same element. */
.cc-rarity-glow {
  border-color: color-mix(in srgb, var(--rc) 55%, var(--border-subtle));
  box-shadow:
    0 0 var(--rc-spread) calc(var(--rc-spread) * -.35) var(--rc-glow),
    inset 0 0 calc(var(--rc-spread) * .8) calc(var(--rc-spread) * -.5) var(--rc-soft);
  transition: box-shadow var(--dur-base) var(--ease-out-expo), border-color var(--dur-base) var(--ease-out-expo);
}

/* Slow breathing pulse for chase tiers only (Classified and above). */
@media (prefers-reduced-motion: no-preference) {
  [data-rarity="CLASSIFIED"].cc-rarity-pulse,
  [data-rarity="COVERT"].cc-rarity-pulse,
  [data-rarity="GOLD"].cc-rarity-pulse {
    animation: cc-rarity-breathe 3.2s var(--ease-in-out-soft) infinite;
  }
}
@keyframes cc-rarity-breathe {
  0%, 100% { filter: drop-shadow(0 0 calc(var(--rc-spread) * .25) var(--rc-soft)); }
  50%      { filter: drop-shadow(0 0 calc(var(--rc-spread) * .55) var(--rc-glow)); }
}

/* Staggered entrance: set style="--i:n" on children. */
.cc-rise {
  animation: cc-rise var(--dur-slow) var(--ease-out-expo) both;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}
@keyframes cc-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}