/* ============================================================
   NEXTGEN ALYGN - EFFECTS TOKENS
   Radii, shadows, signature lavender glow, chrome treatment,
   motion. Aesthetic: sharp & architectural, pill CTAs, subtle
   light-mode shadow, neon lavender glow reserved for dark.
   ============================================================ */

:root {
  /* ---------- Radii (sharp-leaning) ---------- */
  --radius-none:     0;
  --radius-xs:       2px;
  --radius-sm:       4px;
  --radius-md:       8px;
  --radius-lg:       14px;
  --radius-xl:       22px;
  --radius-pill:     999px;
  --radius-squircle: 24%;   /* app-icon / emblem tile */
  --radius-card:     var(--radius-xs); /* default card corner - near-sharp */

  /* ---------- Elevation · light context ---------- */
  --shadow-xs: 0 1px 2px rgba(10, 10, 12, 0.06);
  --shadow-sm: 0 2px 8px rgba(10, 10, 12, 0.08);
  --shadow-md: 0 8px 24px rgba(10, 10, 12, 0.10);
  --shadow-lg: 0 20px 48px rgba(10, 10, 12, 0.14);
  --shadow-xl: 0 32px 80px rgba(10, 10, 12, 0.18);
  --hairline:  inset 0 0 0 1px var(--border-subtle);

  /* ---------- Signature lavender glow (dark context) ---------- */
  --glow-sm: 0 0 16px rgba(123, 92, 255, 0.45);
  --glow-md: 0 0 32px rgba(123, 92, 255, 0.55);
  --glow-lg: 0 0 64px rgba(123, 92, 255, 0.45);
  --glow-edge: 0 0 1px rgba(123, 92, 255, 0.9), 0 0 22px rgba(123, 92, 255, 0.55);

  /* ---------- Metallic / chrome treatment (for the X emblem, accents) ---------- */
  --chrome-gradient: linear-gradient(140deg,
      #ffffff 0%, #dcdce0 16%, #9a9aa2 38%,
      #f0f0f4 54%, #83838c 72%, #d2d2d8 92%, #ffffff 100%); /* @kind color */
  --chrome-gradient-v: linear-gradient(180deg,
      #f4f4f6 0%, #c4c4ca 22%, #86868f 50%, #d8d8de 74%, #9a9aa2 100%); /* @kind color */

  /* ---------- Ambient backdrops ---------- */
  --grad-obsidian: radial-gradient(120% 120% at 80% -10%, #201a3a 0%, #0d0d12 46%, #0a0a0a 100%); /* @kind color */
  --grad-lavender-wash: linear-gradient(135deg, var(--ng-lavender-500) 0%, var(--ng-plasma) 100%); /* @kind color */

  /* ---------- Motion ---------- */
  --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 */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);    /* @kind other */
  --duration-fast: 140ms; /* @kind other */
  --duration:      220ms; /* @kind other */
  --duration-slow: 420ms; /* @kind other */
}
