/* ============================================================
   Cold Anvil website — Elevation & motion tokens
   Flat by conviction: hairline borders separate; shadows are
   near-invisible and reserved for true overlays. No gradients,
   no glow. Motion is fast and near-linear — never springy.
   ============================================================ */

:root {
  /* Shadows — light theme: barely-there */
  --shadow-1: 0 1px 2px oklch(0.2 0.01 264 / 0.05);
  --shadow-2: 0 2px 8px oklch(0.2 0.01 264 / 0.07), 0 1px 2px oklch(0.2 0.01 264 / 0.05);
  --shadow-3: 0 8px 24px oklch(0.2 0.01 264 / 0.10), 0 2px 6px oklch(0.2 0.01 264 / 0.06);

  /* Focus ring — the ember signature at work */
  --ring-width: 2px;
  --ring-offset: 1px;
  --ring: 0 0 0 var(--ring-offset) var(--bg), 0 0 0 calc(var(--ring-offset) + var(--ring-width)) var(--focus-ring);
  --ring-danger: 0 0 0 var(--ring-offset) var(--bg), 0 0 0 calc(var(--ring-offset) + var(--ring-width)) var(--state-danger-emphasis);

  /* Motion — durations (fast, decisive) */
  --dur-instant: 80ms;     /* @kind other */
  --dur-micro: 120ms;      /* @kind other */
  --dur-fast: 160ms;       /* @kind other */
  --dur-state: 200ms;      /* @kind other */
  --dur-entrance: 280ms;   /* @kind other */

  /* Motion — easings (near-linear, no spring/bounce) */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);         /* @kind other */
  --ease-linear: linear;                          /* @kind other */
}

/* Dark theme — faint shadows vanish on charcoal; go deeper */
:root[data-theme="dark"], [data-theme="dark"] {
  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.40);
  --shadow-2: 0 2px 6px oklch(0 0 0 / 0.45), 0 1px 2px oklch(0 0 0 / 0.40);
  --shadow-3: 0 8px 24px oklch(0 0 0 / 0.55), 0 2px 6px oklch(0 0 0 / 0.45);
  /* Re-declared so subtree themes re-substitute --bg / --focus-ring. */
  --ring: 0 0 0 var(--ring-offset) var(--bg), 0 0 0 calc(var(--ring-offset) + var(--ring-width)) var(--focus-ring);
  --ring-danger: 0 0 0 var(--ring-offset) var(--bg), 0 0 0 calc(var(--ring-offset) + var(--ring-width)) var(--state-danger-emphasis);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; /* @kind other */
    --dur-micro: 0ms; /* @kind other */
    --dur-fast: 0ms; /* @kind other */
    --dur-state: 0ms; /* @kind other */
    --dur-entrance: 0ms; /* @kind other */
  }
}