/* ============================================================
   Eliten — Elevation & motion tokens
   Three elevation tiers: surface (cards), field (inputs), overlay
   (popovers/modals). Light theme uses soft layered shadows; dark
   theme drops them for hairline inset rings.
   ============================================================ */

:root,
[data-theme="light"] {
  /* Cards / surfaces — soft, low */
  --surface-shadow:
    0 2px 4px 0 rgba(0, 0, 0, 0.04),
    0 1px 2px 0 rgba(0, 0, 0, 0.06),
    0 0 1px 0 rgba(0, 0, 0, 0.06);

  /* Inputs — same as surface */
  --field-shadow:
    0 2px 4px 0 rgba(0, 0, 0, 0.04),
    0 1px 2px 0 rgba(0, 0, 0, 0.06),
    0 0 1px 0 rgba(0, 0, 0, 0.06);

  /* Popovers / tooltips / dropdowns — highest elevation */
  --overlay-shadow:
    0 2px 8px 0 rgba(0, 0, 0, 0.06),
    0 -6px 12px 0 rgba(0, 0, 0, 0.03),
    0 14px 28px 0 rgba(0, 0, 0, 0.08);

  /* Selected pricing-card lift */
  --shadow-lift:
    0 18px 40px -12px rgba(0, 0, 0, 0.22),
    0 6px 14px -6px rgba(0, 0, 0, 0.14);
}

[data-theme="dark"] {
  /* Dark drops drop-shadows for inset hairlines */
  --surface-shadow: 0 0 0 0 transparent inset;
  --field-shadow: 0 0 0 0 transparent inset;
  --overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  --shadow-lift: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
}

:root {
  /* Motion — calm fades & gentle upward reveals. No bounces. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast: 150ms;      /* @kind other */
  --duration-base: 200ms;      /* @kind other */
  --duration-reveal: 600ms;    /* @kind other */
}

@keyframes eliten-fade-in-up {
  from { opacity: 0; translate: 0 0.5rem; }
  to   { opacity: 1; translate: 0 0; }
}