/* NEXULIS — Effects: borders, shadows, blur, gradients
 * Shadows are restrained and cool-tinted (toward ink, not pure black). On dark
 * surfaces, elevation reads through subtle top-light borders more than shadow.
 * Glow is reserved for accent/active states only — never ambient decoration.
 */

:root {
  /* Border widths */
  --border-width-hairline: 1px;
  --border-width-strong: 1.5px;

  /* Elevation — cool-tinted, low-spread */
  --shadow-xs: 0 1px 2px rgba(3, 6, 15, 0.40);
  --shadow-sm: 0 1px 3px rgba(3, 6, 15, 0.45), 0 1px 2px rgba(3, 6, 15, 0.30);
  --shadow-md: 0 4px 12px rgba(3, 6, 15, 0.45), 0 2px 4px rgba(3, 6, 15, 0.30);
  --shadow-lg: 0 12px 32px rgba(3, 6, 15, 0.55), 0 4px 10px rgba(3, 6, 15, 0.35);
  --shadow-xl: 0 24px 60px rgba(3, 6, 15, 0.60), 0 8px 18px rgba(3, 6, 15, 0.40);

  /* Inset top-light hairline for raised cards on dark */
  --inner-top-light: inset 0 1px 0 rgba(255, 255, 255, 0.04); /* @kind shadow */

  /* Accent glow — focus, active telemetry, primary CTA hover */
  --glow-accent: 0 0 0 1px rgba(59, 130, 246, 0.35), 0 6px 24px rgba(37, 99, 235, 0.28);
  --glow-critical: 0 0 0 1px rgba(239, 68, 68, 0.35), 0 6px 24px rgba(220, 38, 38, 0.22);

  /* Focus ring (applied as outline/box-shadow) */
  --ring-accent: 0 0 0 3px var(--accent-ring); /* @kind shadow */

  /* Blur for overlays / glass nav */
  --blur-sm: blur(8px);  /* @kind other */
  --blur-md: blur(16px); /* @kind other */
  --blur-lg: blur(28px); /* @kind other */

  /* Signature gradients — subtle, cool. Used for hero washes + data fills. */
  --gradient-hero: radial-gradient(120% 90% at 50% -10%, rgba(37, 99, 235, 0.18) 0%, rgba(10, 15, 31, 0) 60%); /* @kind other */
  --gradient-accent: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-500) 100%); /* @kind other */
  --gradient-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%); /* @kind other */

  /* Grid / scanline texture — engineered backdrop */
  --grid-line: rgba(255, 255, 255, 0.035); /* @kind color */
  --grid-pattern:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); /* @kind other */
  --grid-size: 56px 56px; /* @kind other */
}

[data-theme="light"] {
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 10px rgba(15, 23, 42, 0.06);
  --shadow-xl: 0 24px 60px rgba(15, 23, 42, 0.16), 0 8px 18px rgba(15, 23, 42, 0.08);
  --inner-top-light: inset 0 1px 0 rgba(255, 255, 255, 0.6); /* @kind shadow */
  --grid-line: rgba(10, 15, 31, 0.05);
}