/* ============================================================
   LIORA – Effects Tokens
   Shadows · Transitions · Overlays
   ============================================================ */

:root {
  /* ── Shadows ─────────────────────────────────────────────── */
  /* Warm-tinted shadows (dark brown base, not cold grey) */
  /* Flat, near-invisible elevation – matches the design's 1px hairline. */
  --shadow-xs:  0 1px 2px rgba(30, 27, 24, 0.06);
  --shadow-sm:  0 1px 2px rgba(30, 27, 24, 0.06);
  --shadow-md:  0 2px 6px rgba(30, 27, 24, 0.08);
  --shadow-lg:  0 6px 18px rgba(30, 27, 24, 0.10);
  --shadow-xl:  0 12px 32px rgba(30, 27, 24, 0.12);
  --shadow-2xl: 0 24px 56px rgba(30, 27, 24, 0.16);

  /* Gold glow – used for premium/highlighted elements */
  --shadow-gold: 0 2px 8px rgba(169, 152, 132, 0.25);

  /* Inner shadow – for inset elements */
  --shadow-inner: inset 0 1px 3px rgba(42, 26, 14, 0.10);

  /* ── Transitions ─────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */

  --duration-fast:   120ms; /* @kind other */
  --duration-base:   220ms; /* @kind other */
  --duration-slow:   380ms; /* @kind other */
  --duration-slower: 600ms; /* @kind other */

  --transition-fast: var(--duration-fast) var(--ease-out); /* @kind other */
  --transition-base: var(--duration-base) var(--ease-out); /* @kind other */
  --transition-slow: var(--duration-slow) var(--ease-out); /* @kind other */

  /* ── Overlays / Scrims ───────────────────────────────────── */
  --overlay-light:  rgba(250, 245, 238, 0.85);
  --overlay-dark:   rgba(42, 26, 14, 0.55);
  --overlay-darker: rgba(42, 26, 14, 0.75);

  /* ── Borders ─────────────────────────────────────────────── */
  --border-thin:   1px solid var(--color-border);
  --border-base:   1.5px solid var(--color-border-strong);
  --border-gold:   1.5px solid var(--color-border-gold);
  --border-brand:  2px solid var(--color-accent);

  /* ── Z-index Scale ───────────────────────────────────────── */
  --z-below:   -1; /* @kind other */
  --z-base:     0; /* @kind other */
  --z-raised:   10; /* @kind other */
  --z-dropdown: 100; /* @kind other */
  --z-sticky:   200; /* @kind other */
  --z-overlay:  300; /* @kind other */
  --z-modal:    400; /* @kind other */
  --z-toast:    500; /* @kind other */
}