/* ============================================
   EOL'LIEN — Effects Tokens
   (radii, shadows, transitions, borders)
   ============================================ */

:root {
  /* ── BORDER RADIUS ──────────────────────── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-full: 9999px;

  /* ── SHADOWS ────────────────────────────── */
  /* Soft, maritime — never harsh */
  --shadow-xs: 0 1px 2px rgba(27, 28, 30, 0.06);
  --shadow-sm: 0 1px 4px rgba(27, 28, 30, 0.07),
               0 1px 2px rgba(27, 28, 30, 0.04);
  --shadow-md: 0 4px 12px rgba(27, 28, 30, 0.09),
               0 2px 4px  rgba(27, 28, 30, 0.05);
  --shadow-lg: 0 8px 24px rgba(27, 28, 30, 0.10),
               0 4px 8px  rgba(27, 28, 30, 0.06);
  --shadow-xl: 0 16px 48px rgba(27, 28, 30, 0.12),
               0 8px 16px  rgba(27, 28, 30, 0.07);

  /* Brand-tinted glow for primary elements */
  --shadow-ocean: 0 6px 20px rgba(50, 154, 166, 0.28);
  --shadow-meadow: 0 6px 20px rgba(30, 185, 100, 0.26);

  /* ── TRANSITIONS ────────────────────────── */
  --transition-fast:   120ms ease;              /* @kind other */
  --transition-base:   200ms ease;              /* @kind other */
  --transition-slow:   300ms ease;              /* @kind other */
  --transition-gentle: 420ms cubic-bezier(0.25, 0.46, 0.45, 0.94); /* @kind other */
  --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);  /* @kind other */

  /* ── BORDERS ────────────────────────────── */
  --border:         1px solid var(--color-border);
  --border-strong:  1px solid var(--color-border-strong);
  --border-primary: 1.5px solid var(--color-ocean);
  --border-secondary: 1.5px solid var(--color-meadow);
}