/* ============================================================
   LeadPixel — Elevation, liquid-glass & motion tokens
   Dark UI: shadows are deep + soft. Glass is built from a
   translucent tint + heavy backdrop blur, a bright specular
   TOP edge, a dark bottom inner shade, and a corner sheen.
   The ambient light is achromatic/petrol — never colored.
   ============================================================ */
:root {
  /* — Drop shadows — */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.42);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.48);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 40px 90px rgba(0, 0, 0, 0.62);

  /* — Glass edge lighting (the parts that read as "liquid glass") — */
  --glass-blur:    24px;
  --blur-sm: 10px;
  --blur-md: 18px;
  --blur-lg: 30px;

  /* Top specular line + bottom inner shade: the bevel of the glass */
  --glass-bevel:
    inset 0 1px 0 var(--glass-edge),
    inset 0 -1px 0 var(--glass-shade);
  /* Legacy single-line highlight name kept for older refs */
  --highlight-top:   inset 0 1px 0 var(--glass-edge);
  --highlight-inset: inset 0 0 0 1px var(--white-a-06);

  /* Composite elevations for glass surfaces */
  --elevation-glass:     var(--shadow-md), var(--glass-bevel);
  --elevation-glass-pop: var(--shadow-lg), var(--glass-bevel);
  --elevation-card:      var(--shadow-md), var(--glass-bevel);
  --elevation-pop:       var(--shadow-lg), var(--glass-bevel);

  /* Champagne emphasis glow — for the rare active/metallic accent.
     Restrained: a thin ring + a soft warm halo. */
  --glow-accent:      0 0 0 1px var(--accent-ring), 0 12px 40px var(--champagne-glow);
  --glow-accent-soft: 0 8px 28px var(--champagne-glow-lo);

  /* — Ambient background light (achromatic top light + petrol vignette) — */
  --ambient-top:    radial-gradient(120% 80% at 50% -15%, rgba(255,255,255,0.07), transparent 55%); /* @kind other */
  --ambient-petrol: radial-gradient(90% 70% at 80% 110%, var(--petrol-glow), transparent 60%); /* @kind other */

  /* — Faint blueprint grid texture (very subtle, large cells) — */
  --grid-size: 64px;
  --grid-bg:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size);

  /* — Motion — */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   440ms; /* @kind other */
}