/* ==========================================================================
   3 Times Logistics — Design Tokens
   ========================================================================== */
:root {
  /* Brand colors */
  --color-primary-900: #16240f;   /* darkest green (feature strip, dark sections) */
  --color-primary-800: #1f331a;
  --color-primary-700: #2c4524;
  --color-primary-600: #3a5c2f;
  --color-primary-500: #4a7c3f;   /* core brand green */
  --color-primary-400: #5f9a4f;
  --color-primary-300: #7fb968;
  --color-primary-200: #a9d38f;
  --color-primary-100: #dcefd0;
  --color-primary-50:  #f2f8ee;
  --color-brand-accent: var(--color-primary-400); /* reusable headline/accent green — dark-bg contrast */

  --color-gold-600: #a5811d;
  --color-gold-500: #c9a227;      /* logo gold */
  --color-gold-400: #dcb94a;
  --color-gold-100: #f6ecc9;

  /* Neutrals */
  --color-charcoal-900: #14171a;
  --color-charcoal-800: #1c2023;
  --color-charcoal-700: #2a2f33;
  --color-ink: #1c2317;
  --color-text: #22271f;
  --color-text-muted: #5a6357;
  --color-text-subtle: #7c8577;
  --color-border: #e0e5da;
  --color-border-strong: #c7cfbe;
  --color-surface: #ffffff;
  --color-surface-alt: #f6f8f3;
  --color-surface-muted: #eef2e8;

  /* Status */
  --color-success: #2f8a3e;
  --color-success-bg: #e7f5e6;
  --color-warning: #b9791f;
  --color-warning-bg: #fbf0dc;
  --color-danger: #c0392b;
  --color-danger-bg: #fbe6e2;
  --color-info: #2c6ea3;
  --color-info-bg: #e4f0f9;

  /* Typography */
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-xs: 0.75rem;      /* 12px — labels, meta */
  --font-size-sm: 0.9375rem;    /* 15px — nav, buttons, form inputs */
  --font-size-base: 1rem;       /* 16px — body */
  --font-size-md: 1.1875rem;    /* 19px — body-large, card titles */
  --font-size-lg: 1.5rem;       /* 24px — H3 */
  --font-size-xl: 1.875rem;     /* 30px — H2 (section headings) */
  --font-size-2xl: 2.5rem;      /* 40px — H1 (page headers) */
  --font-size-3xl: 3.25rem;     /* 52px — large numerals (pricing) */
  --font-size-display: 4.25rem; /* 68px — hero display */
  --line-height-tight: 1.1;
  --line-height-snug: 1.3;
  --line-height-normal: 1.6;
  --tracking-tight: -0.025em;
  --tracking-snug: -0.01em;
  --tracking-wide: 0.06em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --tracking-wider: 0.1em;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;

  /* Radius & shadow */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(20, 23, 26, 0.06), 0 1px 1px rgba(20, 23, 26, 0.04);
  --shadow-md: 0 6px 16px rgba(20, 23, 26, 0.08), 0 2px 6px rgba(20, 23, 26, 0.05);
  --shadow-lg: 0 20px 40px rgba(20, 23, 26, 0.14), 0 6px 14px rgba(20, 23, 26, 0.08);

  /* Layout */
  --container-max: 1440px;
  --header-height: 84px;
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}