/* ============================================================
   crabcc · radius, border, shadow & motion tokens
   The product reads as a precise developer tool: small radii
   (3–6px), hairline borders, restrained shadows. No glow, no
   heavy drop-shadows. Motion is quick and functional.
   ============================================================ */

:root {
  /* ---- Corner radius ------------------------------------ */
  --radius-xs:  2px;
  --radius-sm:  3px;    /* badges, inline chips, kbd        */
  --radius-md:  4px;    /* buttons, inputs (canonical)      */
  --radius-lg:  6px;    /* cards, panels, dialogs           */
  --radius-xl:  10px;   /* hero / banner blocks             */
  --radius-pill: 999px;

  /* ---- Border widths ------------------------------------ */
  --border-hair: 1px;
  --border-thick: 2px;   /* active row accent, focus edge   */

  /* ---- Shadows ------------------------------------------
     Subtle, cool-neutral. Elevation climbs from card→popover.
     Dark theme dampens shadow and leans on borders instead. */
  --shadow-none: none;
  --shadow-xs:  0 1px 1px rgba(20, 14, 10, 0.04);
  --shadow-sm:  0 1px 2px rgba(20, 14, 10, 0.06),
                0 1px 1px rgba(20, 14, 10, 0.04);
  --shadow-md:  0 2px 8px rgba(20, 14, 10, 0.10);            /* tooltip   */
  --shadow-lg:  0 8px 24px rgba(20, 14, 10, 0.12),
                0 2px 6px rgba(20, 14, 10, 0.08);            /* popover   */
  --shadow-xl:  0 18px 48px rgba(20, 14, 10, 0.18),
                0 4px 12px rgba(20, 14, 10, 0.10);           /* dialog    */
  /* focus halo — paired with --focus-ring color in colors.css */
  --shadow-focus: 0 0 0 3px var(--focus-ring);
  /* warm tint for accent-on-hover lifts */
  --shadow-accent: 0 2px 10px color-mix(in oklch, var(--accent) 30%, transparent);

  /* ---- Motion ------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --ease-snap:  cubic-bezier(0.5, 1.4, 0.5, 1);   /* @kind other */

  --dur-instant: 80ms;    /* @kind other */
  --dur-fast:    140ms;   /* @kind other */
  --dur-medium:  240ms;   /* @kind other */
  --dur-slow:    400ms;   /* @kind other */
  /* the dashboard's "live" pulse + fresh-row fade cadence */
  --dur-pulse:   1600ms;  /* @kind other */

  --transition-control:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

:root[data-theme="dark"] {
  --shadow-xs:  0 1px 1px rgba(0, 0, 0, 0.4);
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md:  0 2px 8px rgba(0, 0, 0, 0.55);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-xl:  0 18px 48px rgba(0, 0, 0, 0.7);
}