/**
 * Visy Logistics design tokens (synced from repo src/styles/tokens.css).
 * Run from repo root: npm run sync:tokens
 */
:root {
  --color-blue: #001489;
  --color-blue-accent: #4d9ce7;
  --color-orange: #ff8736;
  --color-orange-light: #ffa442;
  --color-brand-navy: #102c4f;
  --color-navy: var(--color-brand-navy);
  --color-tab-active: #8d6cef;
  --color-gray-900: #0f172a;
  --color-gray-800: #1e293b;
  --color-gray-600: #475569;
  --color-gray-400: #94a3b8;
  --color-gray-100: #f1f5f9;
  --color-gray-secondary: #64748b;
  --color-border-neutral: #d1d1db;
  --color-border-divider: #ebebef;
  --color-surface-dark: #000000;
  --color-bg-light: #e1ecff;
  --color-white: #ffffff;
  --color-white-80: rgba(255, 255, 255, 0.80);
  --color-white-66: rgba(255, 255, 255, 0.66);
  --color-white-50: rgba(255, 255, 255, 0.50);
  --color-white-40: rgba(255, 255, 255, 0.40);
  --color-white-20: rgba(255, 255, 255, 0.20);
  --color-white-10: rgba(255, 255, 255, 0.10);
  --color-text-button-normal: #121217;
  --color-text-body: #121217;
  --font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-display-xl: 72px;
  --font-size-display-lg: 48px;
  --font-size-display-md: 36px;
  --font-size-display-sm: 30px;
  --font-size-xl: 20px;
  --font-size-lg: 18px;
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;
  --line-height-display-xl: 80px;
  --line-height-display-lg: 56px;
  --line-height-display-md: 48px;
  --line-height-display-sm: 40px;
  --line-height-xl: 28px;
  --line-height-lg: 28px;
  --line-height-base: 24px;
  --line-height-sm: 24px;
  --line-height-xs: 16px;
  --line-height-32: 32px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --letter-spacing-tight: -2.5px;
  --letter-spacing-medium: -1.2px;
  --letter-spacing-hero: -1.8px;
  --letter-spacing-md: -0.9px;
  --spacing-0: 0px;
  --spacing-05: 2px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-14: 56px;
  --spacing-20: 80px;
  --spacing-28: 112px;
  --radius-button: 4px;
  --radius-md: 8px;
  --radius-3xl: 360px;
  --shadow-xs: 0px 1px 2px 0px rgba(18, 18, 23, 0.05);
  --shadow-sm: 0px 1px 3px 0px rgba(18, 18, 23, 0.10),
               0px 1px 2px 0px rgba(18, 18, 23, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
               0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
               0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --container-max-width: 1216px;
  --container-padding-desktop: 112px;
  --container-padding-tablet: 56px;
  --container-padding-mobile: 32px;
  /* Site-wide mobile/tablet stack breakpoint (header, heroes, blocks) */
  --visy-breakpoint-mobile-max: 1024px;
  --visy-breakpoint-desktop-min: 1025px;
  --visy-breakpoint-nav-mobile-max: var(--visy-breakpoint-mobile-max);
  --visy-breakpoint-nav-desktop-min: var(--visy-breakpoint-desktop-min);
  --content-inset-left: max(
    var(--container-padding-desktop),
    calc((100vw - var(--container-max-width) - var(--container-padding-desktop) * 2) / 2 + var(--container-padding-desktop))
  );
  --content-inset-right: max(
    var(--container-padding-desktop),
    calc((100vw - var(--container-max-width) - var(--container-padding-desktop) * 2) / 2 + var(--container-padding-desktop))
  );
}