/* Loopi Digital — elevation, glass, glow, gradients, textures.
   Rule of thumb: darkness does the layering, light does the emphasis.
   Never a drop shadow alone on dark — pair it with a 1px top highlight. */
:root {
  /* ---- shadows (depth) ---- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5); /* @kind shadow */
  --shadow-sm: 0 4px 12px -4px rgba(0, 0, 0, 0.6); /* @kind shadow */
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.7); /* @kind shadow */
  --shadow-lg: 0 28px 64px -24px rgba(0, 0, 0, 0.8); /* @kind shadow */
  --shadow-xl: 0 48px 120px -40px rgba(0, 0, 0, 0.9); /* @kind shadow */

  /* ---- inner light (the "glass bevel") ---- */
  --bevel-top: inset 0 1px 0 rgba(255, 255, 255, 0.12); /* @kind shadow */
  --bevel-full: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.4); /* @kind shadow */
  --bevel-brand: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -8px 24px rgba(0, 0, 0, 0.18); /* @kind shadow */

  /* ---- neon glow ---- */
  --glow-xs: 0 0 12px rgba(0, 244, 155, 0.28); /* @kind shadow */
  --glow-sm: 0 0 24px rgba(0, 244, 155, 0.32); /* @kind shadow */
  --glow-md: 0 0 48px rgba(0, 244, 155, 0.38); /* @kind shadow */
  --glow-lg: 0 0 96px rgba(0, 244, 155, 0.42); /* @kind shadow */
  --glow-xl: 0 0 180px rgba(0, 244, 155, 0.5); /* @kind shadow */
  --glow-ring: 0 0 0 1px rgba(0, 244, 155, 0.45), 0 0 28px rgba(0, 244, 155, 0.35); /* @kind shadow */
  --glow-text: 0 0 28px rgba(0, 244, 155, 0.45); /* @kind shadow */

  /* ---- composed elevations ---- */
  --elev-card: var(--shadow-md), var(--bevel-top); /* @kind shadow */
  --elev-panel: var(--shadow-lg), var(--bevel-full); /* @kind shadow */
  --elev-float: var(--shadow-xl), var(--bevel-full); /* @kind shadow */
  --elev-brand: var(--shadow-md), var(--bevel-brand), var(--glow-sm); /* @kind shadow */

  /* ---- blur ---- */
  --blur-sm: blur(8px); /* @kind other */
  --blur-glass: blur(20px) saturate(140%); /* @kind other */
  --blur-heavy: blur(40px) saturate(160%); /* @kind other */
  --blur-halo: blur(80px); /* @kind other */

  /* ---- gradients ---- */
  --grad-brand: linear-gradient(135deg, #14FFA9 0%, #00F49B 42%, #00A366 100%); /* @kind other */
  --grad-brand-soft: linear-gradient(160deg, rgba(0, 244, 155, 0.22), rgba(0, 244, 155, 0)); /* @kind other */
  --grad-metal: linear-gradient(177deg, #FFFFFF 0%, #DDE8E4 34%, #7E908B 52%, #C6D4CF 68%, #FFFFFF 100%); /* @kind other */
  --grad-chrome-text: linear-gradient(180deg, #FFFFFF 8%, #CFDCD8 46%, #8E9F9A 62%, #F4FAF8 96%); /* @kind other */
  --grad-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 46%, rgba(255, 255, 255, 0.05) 100%); /* @kind other */
  --grad-liquid: conic-gradient(from 210deg at 42% 38%, #00F49B 0deg, #04754B 92deg, #05120E 176deg, #14FFA9 262deg, #00CE81 318deg, #00F49B 360deg); /* @kind other */
  --grad-halo: radial-gradient(closest-side, rgba(0, 244, 155, 0.45), rgba(0, 244, 155, 0.08) 58%, transparent 76%); /* @kind other */
  --grad-scrim-b: linear-gradient(180deg, transparent, rgba(3, 11, 8, 0.92) 78%); /* @kind other */
  --grad-scrim-t: linear-gradient(180deg, rgba(3, 11, 8, 0.95), transparent); /* @kind other */
  --grad-hairline: linear-gradient(90deg, transparent, rgba(0, 244, 155, 0.55) 50%, transparent); /* @kind other */
  --grad-canvas: radial-gradient(120% 80% at 50% -10%, #0C2C22 0%, #061410 44%, #030B08 100%); /* @kind other */

  /* ---- textures (wire grid + fine grain, the two Loopi backdrops) ---- */
  --grid-size: 48px; /* @kind other */
  --wire-grid: linear-gradient(rgba(0, 244, 155, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 244, 155, 0.055) 1px, transparent 1px); /* @kind other */
  --wire-grid-fine: linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px); /* @kind other */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E"); /* @kind other */
}