/* ============================================================
   DarkCortex — Effects: radius, shadow, glow, blur, motion
   ============================================================ */
:root {
  /* Corner radii — tight & technical, not pillowy */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* Elevation shadows (dark UI — deep, low-spread) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.6);

  /* Inner hairline — the "0.5px inner border" premium card look */
  --inset-hairline: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  --inset-top-light: inset 0 1px 0 rgba(255, 255, 255, 0.07);

  /* Neural glows — the brand signature */
  --glow-cyan: 0 0 0 1px rgba(0, 217, 255, 0.4), 0 0 28px rgba(0, 217, 255, 0.28);
  --glow-cyan-soft: 0 0 40px rgba(0, 217, 255, 0.18);
  --glow-coral: 0 0 0 1px rgba(255, 107, 53, 0.45), 0 0 26px rgba(255, 107, 53, 0.3);
  --glow-violet: 0 0 60px rgba(124, 58, 237, 0.22);

  /* Blur (glass) */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 28px;

  /* Motion — quick, confident, no bounce on UI */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);/* @kind other */
  --dur-fast: 120ms;  /* @kind other */
  --dur-base: 200ms;  /* @kind other */
  --dur-slow: 360ms;  /* @kind other */

  /* Gradients */
  --grad-neural: linear-gradient(135deg, var(--cyan-400) 0%, var(--violet-500) 100%);
  --grad-action: linear-gradient(180deg, var(--coral-400) 0%, var(--coral-500) 100%);
  --grad-surface: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 100%);
  --grad-veil: linear-gradient(180deg, rgba(6,8,12,0) 0%, var(--ink-950) 100%);

  /* === Neural / synapse motif (the brand signature from the shield) === */
  --synapse-line: rgba(0, 217, 255, 0.16);   /* resting connection */
  --synapse-line-lit: rgba(0, 217, 255, 0.7); /* firing connection  */
  --node-fill: #0D1117;                       /* node core (matches surface) */
  --node-ring: rgba(0, 217, 255, 0.55);       /* node halo */
  --node-core: #00D9FF;                       /* node center dot */
  --signal: #5CE6FF;                          /* traveling pulse */
  --neural-veil: radial-gradient(60% 60% at 50% 40%, rgba(0,217,255,0.10), transparent 70%); /* @kind other */
}

/* Light theme — softer shadows, aurora mesh replaces neural glow */
[data-theme="light"] {
  --shadow-sm: 0 1px 2px rgba(21, 17, 12, 0.06);
  --shadow-md: 0 8px 24px rgba(21, 17, 12, 0.08);
  --shadow-lg: 0 20px 50px rgba(21, 17, 12, 0.10);
  --shadow-xl: 0 32px 80px rgba(21, 17, 12, 0.12);
  --inset-hairline: inset 0 0 0 1px rgba(21, 17, 12, 0.05);
  --inset-top-light: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --glow-cyan: 0 0 0 1px rgba(8, 145, 178, 0.3), 0 10px 30px rgba(8, 145, 178, 0.15);
  --glow-cyan-soft: 0 0 40px rgba(8, 145, 178, 0.12);
  --glow-coral: 0 0 0 1px rgba(232, 83, 29, 0.35), 0 10px 28px rgba(232, 83, 29, 0.18);
  --glow-violet: 0 0 60px rgba(109, 40, 217, 0.14);
  --grad-neural: linear-gradient(135deg, var(--aurora-cyan) 0%, var(--aurora-violet) 100%);
  --grad-surface: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%);
  --grad-veil: linear-gradient(180deg, rgba(240,236,229,0) 0%, var(--cloud-100) 100%);
  /* Neural motif on light */
  --synapse-line: rgba(8, 145, 178, 0.18);
  --synapse-line-lit: rgba(8, 145, 178, 0.65);
  --node-fill: #FFFFFF;
  --node-ring: rgba(8, 145, 178, 0.55);
  --node-core: #0891B2;
  --signal: #6D28D9;
  --neural-veil: radial-gradient(60% 60% at 50% 40%, rgba(8,145,178,0.10), transparent 70%); /* @kind other */
}