/* ============================================================
   TechXYZ — Radii, shadows, motion & effects
   Geometric, lightly rounded. Cool-tinted soft shadows.
   ============================================================ */

:root {
  /* ---- Corner radii --------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;   /* buttons, inputs, chips */
  --radius-lg:   14px;   /* cards */
  --radius-xl:   20px;   /* panels, modals */
  --radius-2xl:  28px;   /* hero surfaces */
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- Shadows: cool, navy-tinted, soft ------------------- */
  --shadow-xs:  0 1px 2px rgba(12, 34, 54, 0.06);
  --shadow-sm:  0 1px 3px rgba(12, 34, 54, 0.08), 0 1px 2px rgba(12, 34, 54, 0.06);
  --shadow-md:  0 4px 10px rgba(12, 34, 54, 0.08), 0 2px 4px rgba(12, 34, 54, 0.06);
  --shadow-lg:  0 12px 28px rgba(12, 34, 54, 0.12), 0 4px 10px rgba(12, 34, 54, 0.07);
  --shadow-xl:  0 24px 56px rgba(12, 34, 54, 0.16), 0 8px 20px rgba(12, 34, 54, 0.08);

  /* Brand glow — the "spark" on key CTAs and active states */
  --shadow-brand: 0 8px 24px rgba(0, 171, 252, 0.28);
  --glow-spark:   0 0 0 1px rgba(0,171,252,0.4), 0 6px 20px rgba(0,171,252,0.25);

  /* Inset for sunken fields / pressed states */
  --shadow-inset: inset 0 1px 2px rgba(12, 34, 54, 0.08);

  /* ---- Motion --------------------------------------------- */
  --ease-standard:  cubic-bezier(0.2, 0, 0, 1);      /* @kind other */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);   /* @kind other */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */

  --duration-instant: 80ms;   /* @kind other */
  --duration-fast:    140ms;  /* @kind other */
  --duration-base:    220ms;  /* @kind other */
  --duration-slow:    360ms;  /* @kind other */
  --duration-slower:  560ms;  /* @kind other */

  /* ---- Gradients ------------------------------------------ */
  --gradient-spark: linear-gradient(135deg, var(--azure-400) 0%, var(--azure-600) 100%);  /* @kind other */
  --gradient-ink:   linear-gradient(160deg, var(--ink-800) 0%, var(--ink-950) 100%);       /* @kind other */
  --gradient-mesh:  radial-gradient(120% 120% at 100% 0%, rgba(0,171,252,0.18) 0%, rgba(0,171,252,0) 45%), var(--ink-900);  /* @kind other */

  /* Backdrop blur level for glass surfaces */
  --blur-glass: saturate(160%) blur(14px);  /* @kind other */
}