/* HolonomiX - Effects: radii, borders, shadows, motion, texture
   ==================================================================
   The brand is FLAT and STRUCTURAL. Corners are near-sharp. Elevation
   is communicated with hairline borders and faint accent glow, not
   soft drop shadows. Motion is fast, linear-ish, never bouncy.
*/

:root {
  /* ---- Radii (sharp by default) ---- */
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   3px;
  --radius-md:   5px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --bw-hair:   1px;   /* @kind spacing */
  --bw-strong: 1.5px; /* @kind spacing */
  --bw-heavy:  2px;   /* @kind spacing */

  /* ---- Shadows (used sparingly; mostly on light) ---- */
  --shadow-none: none;
  --shadow-sm:  0 1px 2px rgba(10,11,13,0.06), 0 0 0 1px rgba(10,11,13,0.04);
  --shadow-md:  0 4px 16px rgba(10,11,13,0.08), 0 0 0 1px rgba(10,11,13,0.05);
  --shadow-lg:  0 16px 48px rgba(10,11,13,0.16), 0 0 0 1px rgba(10,11,13,0.06);
  --shadow-accent: 0 0 0 1px var(--hx-teal), 0 0 24px var(--hx-teal-glow);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0.05, 0.36, 1);   /* @kind other */
  --ease-snap:  cubic-bezier(0.2, 0.9, 0.1, 1);      /* @kind other */
  --dur-instant: 80ms;  /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    360ms; /* @kind other */

  /* ---- Blueprint texture (use as background-image) ---- */
  --grid-size: 32px; /* @kind spacing */
  --grid-bg:
    linear-gradient(var(--grid-line) var(--bw-hair), transparent var(--bw-hair)),
    linear-gradient(90deg, var(--grid-line) var(--bw-hair), transparent var(--bw-hair)); /* @kind other */

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--hx-teal); /* @kind shadow */
}