/* Plexus Freight design tokens. Source: plexusfreight.com (Elementor theme), October 2026. */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Brand green. #52D273 fails contrast as text on white, so text uses green-700. */
  --green-50: #E9F9ED;
  --green-200: #A9E8BA;
  --green-500: #52D273;
  --green-600: #3BBF5F;
  --green-700: #22863D;

  /* Ink and neutrals */
  --ink-900: #171A23;
  --ink-700: #333340;
  --grey-600: #69727D;
  --grey-400: #9CA3AF;
  --grey-300: #D1D5DB;
  --grey-200: #E5E7EB;
  --white: #FFFFFF;
  --tint: #F4F7F5;

  /* Status */
  --red-50: #FEF2F2;
  --red-200: #FECACA;
  --red-700: #B91C1C;
  --amber-50: #FFFBEB;
  --amber-200: #FDE68A;
  --amber-700: #B45309;

  /* Semantic */
  --color-bg: var(--white);
  --color-bg-subtle: var(--tint);
  --color-surface: var(--white);
  --color-surface-muted: var(--tint);
  --color-text: var(--ink-900);
  --color-text-muted: var(--grey-600);
  --color-text-subtle: var(--grey-400);
  --color-text-inverse: var(--white);
  --color-border: var(--grey-200);
  --color-border-strong: var(--grey-300);
  --color-brand: var(--green-500);
  --color-brand-hover: var(--green-600);
  --color-brand-text: var(--green-700);
  --color-brand-tint: var(--green-50);
  --color-focus: var(--green-500);
  --color-success: var(--green-700);
  --color-success-bg: var(--green-50);
  --color-warning: var(--amber-700);
  --color-warning-bg: var(--amber-50);
  --color-danger: var(--red-700);
  --color-danger-bg: var(--red-50);
  --color-info: var(--ink-700);
  --color-info-bg: var(--tint);

  /* Type */
  --font-sans: 'Kanit', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 48px;
  --text-5xl: 68px;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --tracking-caps: 0.04em;

  /* Space: 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 100px;
  --shadow-sm: 0 1px 2px rgba(23, 26, 35, 0.06);
  --shadow-md: 0 8px 24px rgba(23, 26, 35, 0.08);
  --shadow-lg: 0 16px 40px rgba(23, 26, 35, 0.12);
  --ring: 0 0 0 3px rgba(82, 210, 115, 0.35);

  /* Layout */
  --container: 1400px;
  --header-h: 72px;
  --transition: 150ms ease;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}