/* ============================================================
   Hitachi Vantara — Effects: radius, elevation, borders, motion
   The brand reads sharp and corporate: small radii, restrained
   shadows, thin hairline borders. Flat over glossy.
   ============================================================ */
:root {
  /* Corner radius — kept tight; the brand is squared-off */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Border widths */
  --border-w: 1px;
  --border-w-thick: 2px;
  --border-w-accent: 4px;   /* the signature red rule / left accent bar */

  /* Elevation — soft, neutral, low-spread (no colored shadows) */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(12,12,12,0.06);
  --shadow-md: 0 2px 8px rgba(12,12,12,0.08);
  --shadow-lg: 0 8px 24px rgba(12,12,12,0.10);
  --shadow-xl: 0 16px 40px rgba(12,12,12,0.14);

  /* Motion — quick, clean, no bounce */
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);   /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur-base: 180ms;   /* @kind other */
  --dur-slow: 280ms;   /* @kind other */

  /* Focus */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
}