/* =============================================================
   Penumbra — Borders, elevation & motion tokens
   The system is flat: elevation comes from surface tiers + hairlines,
   never from stacked drop shadows. No colored/saturated shadows.
   ============================================================= */

:root {
  /* Borders */
  --border-hairline: 1px solid var(--color-border);
  --border-strong: 1px solid var(--color-border-strong);
  --border-focus: 1px solid var(--color-focus);

  /* Elevation */
  --elevation-flat: none;
  --elevation-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --elevation-raised: inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 30px rgba(0, 0, 0, 0.45);
  --elevation-glow: 0 0 0 6px var(--color-focus-glow);

  /* Motion */
  --transition-fast: 120ms ease; /* @kind other */
  --transition-base: 180ms ease; /* @kind other */
  --transition-slow: 260ms ease; /* @kind other */
}