/* ============================================================
   LendVault — Effects: radii, borders, shadows, motion
   Dark UI leans on hairline borders; light UI on soft shadows.
   ============================================================ */

:root {
  /* --- Corner radii -------------------------------------------------- */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   10px;   /* buttons, inputs */
  --radius-lg:   14px;   /* cards */
  --radius-xl:   20px;   /* panels */
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* --- Border widths ------------------------------------------------- */
  --border-hair: 1px;    /* @kind other */
  --border-1:    1.5px;  /* @kind other */
  --border-2:    2px;    /* @kind other */

  /* --- Shadows (light context) -------------------------------------- */
  --shadow-xs:  0 1px 2px rgba(26, 27, 26, 0.06);
  --shadow-sm:  0 2px 6px rgba(26, 27, 26, 0.08);
  --shadow-md:  0 8px 24px rgba(26, 27, 26, 0.10);
  --shadow-lg:  0 18px 48px rgba(26, 27, 26, 0.14);

  /* --- Glows (dark / app context) ----------------------------------- */
  --glow-teal:   0 0 0 1px rgba(35,170,171,0.45), 0 8px 28px rgba(35,170,171,0.28);
  --glow-orange: 0 0 0 1px rgba(249,124,52,0.45), 0 8px 28px rgba(249,124,52,0.25);
  --glow-soft-teal:   0 10px 40px rgba(35,170,171,0.14);   /* @kind other */
  --glow-soft-orange: 0 10px 40px rgba(249,124,52,0.12);   /* @kind other */

  /* --- Motion -------------------------------------------------------- */
  --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 */
  --dur-fast:   120ms;   /* @kind other */
  --dur-base:   200ms;   /* @kind other */
  --dur-slow:   320ms;   /* @kind other */

  /* --- Signature backdrop ------------------------------------------- */
  /* The live site's canvas: near-black with paired teal + orange radial
     glows and a subtle vertical wash. Exposed as --lv-glow-canvas and the
     .lv-canvas helper. The legacy cross-grid PNG is kept as an overlay. */
  --lv-glow-canvas:
    radial-gradient(1100px 620px at 82% -8%, rgba(35,170,171,0.14), transparent 60%),
    radial-gradient(900px 520px at 8% 4%, rgba(249,124,52,0.10), transparent 55%),
    linear-gradient(180deg, #06060A, #08080F 40%, #06060A);   /* @kind other */
  --lv-cross-grid: url("../assets/backgrounds/dark-cross-grid.png");  /* @kind other */
}