/* HKC Shipping — Design Tokens */
:root {
  /* Colors */
  --color-primary: #184A7A;
  --color-secondary: #1A75AF;
  --color-accent: #37B7F5;
  --color-dark: #071B2E;
  --color-background: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-text: #111827;
  --color-muted: #64748B;
  --color-border: #E8EDF2;
  --color-glass: rgba(255, 255, 255, 0.08);
  --color-glass-border: rgba(255, 255, 255, 0.15);
  --color-glass-solid: rgba(7, 27, 46, 0.85);

  /* Typography */
  --font-heading: "Manrope", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-arabic: "Cairo", "Tajawal", var(--font-body);

  /* Type Scale — Desktop */
  --text-hero: 4.5rem;
  --text-h1: 3.5rem;
  --text-h2: 2.5rem;
  --text-h3: 1.75rem;
  --text-h4: 1.375rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-overline: 0.8125rem;

  /* Spacing (8px base) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-10: 5rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* Layout */
  --container-max: 1440px;
  --container-padding: 5rem;
  --grid-columns: 12;
  --grid-gutter: 1.5rem;

  /* Radius */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 1.5rem;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(7, 27, 46, 0.04);
  --shadow-md: 0 4px 16px rgba(7, 27, 46, 0.06);
  --shadow-lg: 0 8px 32px rgba(7, 27, 46, 0.08);
  --shadow-glass: 0 8px 32px rgba(7, 27, 46, 0.12);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* Header */
  --header-height: 5rem;
  --header-height-scrolled: 4.25rem;
}

/* Tablet */
@media (max-width: 1023px) {
  :root {
    --text-hero: 3.5rem;
    --text-h1: 2.75rem;
    --text-h2: 2rem;
    --text-h3: 1.5rem;
    --container-padding: 2.5rem;
    --grid-columns: 8;
  }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --text-hero: 2.625rem;
    --text-h1: 2.25rem;
    --text-h2: 1.75rem;
    --text-h3: 1.375rem;
    --container-padding: 1.25rem;
    --grid-columns: 4;
    --header-height: 4.5rem;
  }
}

/* Arabic overrides */
html[lang="ar"] {
  --font-body: var(--font-arabic);
  --font-heading: var(--font-arabic);
}