/* =============================================================
   GKS LOGISTICS — V3 PREMIUM DESIGN TOKENS
   Loaded AFTER styles.css so the new tokens override the legacy
   palette without touching the original stylesheet.
   ============================================================= */

:root {
  /* ---- Brand palette (per client brief) ---- */
  --gks-blue:        #0A3D62;
  --gks-blue-700:    #062A45;
  --gks-blue-500:    #1B5C8A;
  --gks-blue-300:    #6FA0C2;
  --gks-blue-50:     #EAF2F8;

  --gks-red:         #E63946;
  --gks-red-700:     #C42836;
  --gks-red-300:     #F4A2A8;

  --gks-white:       #FFFFFF;
  --gks-grey-50:     #FAFAFB;
  --gks-grey-100:    #F5F5F5;
  --gks-grey-200:    #E8EAED;
  --gks-grey-300:    #D4D7DD;
  --gks-grey-500:    #8A8F98;
  --gks-grey-700:    #4A4F58;
  --gks-grey-900:    #0E1116;

  /* ---- Backwards-compatible aliases for legacy CSS ---- */
  --primary-color:   var(--gks-blue);
  --secondary-color: var(--gks-red);
  --accent-color:    var(--gks-red);
  --neutral-100:     var(--gks-white);
  --neutral-200:     var(--gks-grey-50);
  --neutral-300:     var(--gks-grey-100);
  --neutral-400:     var(--gks-grey-200);
  --neutral-500:     var(--gks-grey-300);
  --neutral-600:     var(--gks-grey-500);
  --neutral-700:     var(--gks-grey-700);
  --neutral-800:     var(--gks-grey-900);
  --neutral-900:     var(--gks-grey-900);

  /* ---- Typography ---- */
  --font-display: 'Montserrat', 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display: clamp(3.15rem, 6.2vw, 5.25rem);
  --fs-h1:      clamp(2.55rem, 4.7vw, 4.25rem);
  --fs-h2:      clamp(1.95rem, 3.2vw, 2.75rem);
  --fs-h3:      clamp(1.4rem, 2.1vw, 1.75rem);
  --fs-lead:    clamp(1.15rem, 1.5vw, 1.3rem);
  --fs-body:    1.15rem;
  --fs-sm:      1.03rem;
  --fs-xs:      0.94rem;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.74;

  /* ---- Elevation ---- */
  --gks-shadow-sm:    0 1px 2px rgba(10, 22, 40, 0.06), 0 1px 3px rgba(10, 22, 40, 0.04);
  --gks-shadow-md:    0 6px 16px -6px rgba(10, 22, 40, 0.12);
  --gks-shadow-lg:    0 14px 36px -12px rgba(10, 61, 98, 0.20);
  --gks-shadow-xl:    0 30px 60px -20px rgba(10, 61, 98, 0.28);
  --gks-shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.45),
                      0 30px 60px -20px rgba(10, 61, 98, 0.25);

  /* ---- Motion ---- */
  --ease-premium: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;

  /* ---- Layout ---- */
  --container-max: 1240px;
  --section-py:    clamp(3rem, 6vw, 5.5rem);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-modal:  1000;
  --z-toast:  1100;
  --z-float:  90;
}

/* Smooth scroll site-wide (respect reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Prefer self-hosted-feel font fallback */
body.v3 {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body, 1.6);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.v3 p,
body.v3 li {
  font-size: var(--fs-body);
  line-height: var(--lh-body, 1.6);
}

h1, h2, h3, h4, .display, .gks-display {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}