/* ===========================================================
   NEW SHRIJI INTERNATIONAL — DESIGN TOKENS
   Every colour, font and spacing value in the site comes from
   here. Change a value in this file and it updates everywhere.
   Brand colours sampled directly from the official logo vector.
   =========================================================== */

:root {
  /* ---- BRAND (exact values from logo.svg) ---- */
  --navy:          #202F6B;   /* logo wordmark + globe mark */
  --red:           #E31E24;   /* logo "New" + speed streak  */
  --white:         #FFFFFF;

  /* ---- BRAND SHADES (derived) ---- */
  --navy-900:      #0E1636;   /* footer, deepest ground     */
  --navy-800:      #16214E;   /* hero gradient end          */
  --navy-700:      #1A2757;
  --navy-600:      var(--navy);
  --navy-500:      #2E4291;   /* hover on navy              */
  --navy-300:      #7C8CC4;   /* muted navy text on dark    */
  --navy-100:      #D9DFF1;

  --red-700:       #B0151A;   /* pressed                    */
  --red-600:       #C4161B;   /* hover                      */
  --red-500:       var(--red);
  --red-300:       #F2666B;
  --red-50:        #FDECED;   /* tint background            */

  /* ---- NEUTRALS (biased toward navy, never pure grey) ---- */
  --ground:        #F5F7FB;   /* page background            */
  --surface:       #FFFFFF;   /* cards                      */
  --surface-2:     #EDF1F8;   /* alternating sections       */
  --ink:           #121728;   /* body text                  */
  --ink-soft:      #2C3450;   /* headings on light          */
  --muted:         #5C6885;   /* secondary text             */
  --hairline:      #E1E7F2;   /* borders, dividers          */

  /* ---- SEMANTIC (status pills, alerts) ---- */
  --ok:            #17845A;
  --ok-bg:         #E6F5EE;
  --warn:          #B57314;
  --warn-bg:       #FDF3E2;
  --danger:        var(--red);
  --danger-bg:     var(--red-50);
  --info:          var(--navy);
  --info-bg:       #E9EEFA;

  /* ---- TYPE ----
     Barlow superfamily: Semi Condensed for headings (transport
     signage DNA — right for a courier brand), regular for body. */
  --font-display: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --font-body:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-h1:    clamp(2.4rem, 5.2vw, 3.9rem);
  --fs-h2:    clamp(1.95rem, 3.9vw, 3rem);
  --fs-h3:    1.28rem;
  --fs-lead:  clamp(1.05rem, 1.5vw, 1.22rem);
  --fs-body:  1rem;
  --fs-sm:    0.9rem;
  --fs-xs:    0.8rem;
  --fs-label: 0.75rem;

  --lh-tight: 1.08;
  --lh-head:  1.18;
  --lh-body:  1.7;

  --tracking-label: 0.18em;
  --tracking-tight: -0.02em;

  /* ---- SPACING (4pt scale) ---- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 80px;  --s-10: 96px;

  --section-y:   clamp(64px, 9vw, 118px);   /* vertical section rhythm */
  /* Wide, near-full-bleed layout: content runs close to the screen edges with
     just enough breathing room. Capped at 1800px so it doesn't stretch absurdly
     on very large monitors. */
  --gutter:      clamp(18px, 3vw, 56px);
  --maxw:        1800px;
  --maxw-narrow: 760px;

  /* ---- RADIUS ---- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* ---- ELEVATION (navy-tinted, never pure black) ---- */
  --shadow-sm: 0 2px 8px  rgba(18, 23, 40, 0.06);
  --shadow-md: 0 8px 24px rgba(18, 23, 40, 0.09);
  --shadow-lg: 0 18px 44px rgba(18, 23, 40, 0.13);
  --shadow-red: 0 8px 22px rgba(227, 30, 36, 0.32);

  /* ---- MOTION ---- */
  --ease:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:  0.18s;
  --dur-mid:   0.32s;
  --dur-slow:  0.7s;

  --z-nav: 100;
  --z-modal: 200;
}

/* Respect users who prefer less motion — applies site-wide. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}