/* Karavex Cargo — spacing, radius, controls, elevation, motion. Source: system/variables.css */
:root {
  --brand-size-xxs: 4px;
  --brand-size-xs: 8px;
  --brand-size-sm: 12px;
  --brand-size: 16px;
  --brand-size-md: 20px;
  --brand-size-lg: 24px;
  --brand-size-xl: 32px;
  --brand-size-xxl: 48px;

  --brand-border-radius-xs: 3px;
  --brand-border-radius-sm: 5px;
  --brand-border-radius: 8px;
  --brand-border-radius-lg: 10px;
  --radius-panel: 14px;
  --brand-line-width: 1px;

  --brand-control-height-xs: 16px;
  --brand-control-height-sm: 24px;
  --brand-control-height: 32px;
  --brand-control-height-lg: 40px;

  --shadow-card: 0 1px 2px var(--brand-color-fill-quaternary);
  --shadow-raised: 0 8px 28px -16px var(--brand-color-fill-secondary);
  --shadow-panel: 0 32px 80px -24px var(--brand-color-fill-secondary);
  --shadow-button-primary: 0 2px 0 var(--brand-color-primary-bg);
  --focus-ring: 0 0 0 3px var(--brand-color-primary-bg);

  --brand-motion-duration-fast: 0.1s; /* @kind other */
  --brand-motion-duration-mid: 0.2s; /* @kind other */
  --brand-motion-duration-slow: 0.3s; /* @kind other */
  --brand-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); /* @kind other */
  --brand-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); /* @kind other */

  --layout-max-width: 1120px;
  --layout-columns: 8; /* @kind other */
}