/* ============================================
   SA SHIPPING — Design Tokens
   ============================================
   All design values in one place for easy updates.
   Change a variable here → updates everywhere.
   ============================================ */

:root {
  /* ── Primary Colors ── */
  --color-navy:        #0A1F3B;
  --color-navy-light:  #122E54;
  --color-navy-dark:   #061428;

  /* ── Secondary / Accent ── */
  --color-ocean:       #1B5E8A;
  --color-ocean-light: #2478AD;
  --color-sky:         #3A9BD5;

  /* ── CTA / Accent ── */
  --color-orange:       #F28C28;
  --color-orange-light: #F5A623;
  --color-orange-dark:  #D97B1F;
  --color-orange-glow:  rgba(242, 140, 40, 0.25);

  /* ── Neutrals ── */
  --color-white:       #FFFFFF;
  --color-off-white:   #F8F9FC;
  --color-light-grey:  #F0F2F5;
  --color-grey:        #D1D5DB;
  --color-mid-grey:    #9CA3AF;
  --color-dark-grey:   #6B7280;
  --color-text:        #2D3436;
  --color-text-light:  #636E72;
  --color-black:       #111111;

  /* ── Status ── */
  --color-success:     #10B981;
  --color-error:       #EF4444;

  /* ── Gradients ── */
  --gradient-navy:     linear-gradient(135deg, #0A1F3B 0%, #122E54 100%);
  --gradient-ocean:    linear-gradient(135deg, #1B5E8A 0%, #3A9BD5 100%);
  --gradient-orange:   linear-gradient(135deg, #F28C28 0%, #F5A623 100%);
  --gradient-hero:     linear-gradient(135deg, rgba(10, 31, 59, 0.92) 0%, rgba(27, 94, 138, 0.85) 100%);
  --gradient-cta:      linear-gradient(135deg, #0A1F3B 0%, #1B5E8A 50%, #0A1F3B 100%);
  --gradient-glass:    linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);

  /* ── Typography ── */
  --font-heading:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:     'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-display:    clamp(2.5rem, 5vw, 4rem);
  --fs-h1:         clamp(2rem, 4vw, 3rem);
  --fs-h2:         clamp(1.75rem, 3vw, 2.25rem);
  --fs-h3:         clamp(1.25rem, 2vw, 1.5rem);
  --fs-h4:         clamp(1.1rem, 1.5vw, 1.25rem);
  --fs-body:       1rem;
  --fs-body-lg:    1.125rem;
  --fs-small:      0.875rem;
  --fs-xs:         0.75rem;

  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  --lh-tight:      1.2;
  --lh-normal:     1.6;
  --lh-relaxed:    1.8;

  /* ── Spacing ── */
  --space-xs:      0.25rem;
  --space-sm:      0.5rem;
  --space-md:      1rem;
  --space-lg:      1.5rem;
  --space-xl:      2rem;
  --space-2xl:     3rem;
  --space-3xl:     4rem;
  --space-4xl:     6rem;
  --space-5xl:     8rem;

  --section-padding: clamp(4rem, 8vw, 7rem);

  /* ── Layout ── */
  --container-max:   1200px;
  --container-narrow: 900px;
  --container-wide:  1400px;

  /* ── Borders & Radius ── */
  --radius-sm:     6px;
  --radius-md:     12px;
  --radius-lg:     20px;
  --radius-xl:     28px;
  --radius-full:   9999px;

  /* ── Shadows ── */
  --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:     0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg:     0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl:     0 20px 60px rgba(0, 0, 0, 0.15);
  --shadow-glow:   0 0 40px rgba(242, 140, 40, 0.15);
  --shadow-card:   0 4px 20px rgba(10, 31, 59, 0.08);
  --shadow-card-hover: 0 8px 40px rgba(10, 31, 59, 0.15);

  /* ── Glassmorphism ── */
  --glass-bg:       rgba(255, 255, 255, 0.08);
  --glass-border:   rgba(255, 255, 255, 0.15);
  --glass-blur:     20px;

  /* ── Transitions ── */
  --transition-fast:   0.2s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.5s ease;
  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index ── */
  --z-dropdown:    100;
  --z-sticky:      200;
  --z-fixed:       300;
  --z-overlay:     400;
  --z-modal:       500;
  --z-toast:       600;
}