/* ============================================================
   Bosch Web Design System — Spacing, Radius, Elevation, Motion
   Bosch uses a 4px base grid and SHARP corners (radius 0) by default.
   ============================================================ */

:root {
  /* Spacing scale — 4px base grid */
  --bds-space-0: 0;
  --bds-space-2: 2px;
  --bds-space-4: 4px;
  --bds-space-8: 8px;
  --bds-space-12: 12px;
  --bds-space-16: 16px;
  --bds-space-20: 20px;
  --bds-space-24: 24px;
  --bds-space-32: 32px;
  --bds-space-40: 40px;
  --bds-space-48: 48px;
  --bds-space-64: 64px;
  --bds-space-80: 80px;
  --bds-space-96: 96px;

  /* Border radius — Bosch is sharp-cornered. radius-0..3 = 0 in primary theme. */
  --bds-radius-none: 0;
  --bds-radius-sm: 0;
  --bds-radius-md: 0;
  --bds-radius-lg: 0;
  --bds-radius-pill: 1000px;   /* fully rounded (chips, avatars, progress) */
  --bds-radius-circle: 50%;

  /* Border widths */
  --bds-border-width: 1px;
  --bds-border-width-strong: 2px;

  /* Control sizes (heights) */
  --bds-control-h-sm: 40px;
  --bds-control-h-md: 48px;    /* default button/input height */
  --bds-control-h-lg: 56px;

  /* Elevation — Bosch shadow system (rgba black 0.25) */
  --bds-shadow-color: rgba(0, 0, 0, 0.25);
  --bds-shadow-s: 0 1px 4px 0 rgba(0, 0, 0, 0.25);
  --bds-shadow-m: 0 4px 16px 0 rgba(0, 0, 0, 0.25);
  --bds-shadow-l: 0 8px 64px 0 rgba(0, 0, 0, 0.25);

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

  /* Motion — Bosch easing & durations (functional, subtle) */
  --bds-ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --bds-ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --bds-ease-out: cubic-bezier(0, 0, 0.2, 1); /* @kind other */
  --bds-duration-fast: 150ms; /* @kind other */
  --bds-duration: 250ms; /* @kind other */
  --bds-duration-slow: 400ms; /* @kind other */

  /* Layout */
  --bds-container-max: 1280px;
  --bds-supergraphic-height: 6px;
}