/* ============================================================
   ITT DESIGN TOKENS — variables.css
   International Trade & Tech (Pvt) Ltd.
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --color-navy:          #25226B;
  --color-navy-dark:     #1a1850;
  --color-navy-light:    #332f7f;
  --color-blue:          #608BB4;
  --color-blue-light:    #7da3c6;
  --color-blue-dark:     #4a7299;
  --color-lavender:      #AAA2CE;
  --color-lavender-light:#c4bee0;
  --color-lavender-pale: #F5F4FA;
  --color-red:           #D00000;
  --color-red-dark:      #a80000;
  --color-white:         #FFFFFF;
  --color-dark:          #202538;
  --color-dark-light:    #3a3f54;
  --color-gray-100:      #f8f9fa;
  --color-gray-200:      #e9ecef;
  --color-gray-300:      #dee2e6;
  --color-gray-400:      #ced4da;
  --color-gray-500:      #adb5bd;
  --color-gray-600:      #6c757d;
  --color-gray-700:      #495057;

  /* ── Functional Colors ── */
  --bg-primary:          var(--color-white);
  --bg-secondary:        var(--color-lavender-pale);
  --bg-dark:             var(--color-navy);
  --bg-card:             var(--color-white);
  --text-primary:        var(--color-dark);
  --text-secondary:      var(--color-gray-600);
  --text-heading:        var(--color-navy);
  --text-on-dark:        var(--color-white);
  --accent-primary:      var(--color-blue);
  --accent-secondary:    var(--color-lavender);
  --accent-cta:          var(--color-red);

  /* ── Typography ── */
  --font-heading:        'Poppins', Arial, sans-serif;
  --font-body:           'Inter', Arial, sans-serif;

  --fs-hero:             clamp(2rem, 3.5vw, 2.75rem);
  --fs-h1:               clamp(2rem, 3.5vw, 3rem);
  --fs-h2:               clamp(1.5rem, 2.5vw, 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;

  --lh-heading:          1.25;
  --lh-body:             1.7;

  /* ── Spacing ── */
  --space-xs:            4px;
  --space-sm:            8px;
  --space-md:            16px;
  --space-lg:            24px;
  --space-xl:            32px;
  --space-2xl:           48px;
  --space-3xl:           64px;
  --space-4xl:           80px;
  --space-5xl:           96px;
  --space-6xl:           120px;

  /* ── Layout ── */
  --container-max:       1280px;
  --container-narrow:    960px;
  --container-wide:      1440px;
  --section-padding:     var(--space-5xl) var(--space-lg);

  /* ── Border Radius ── */
  --radius-sm:           6px;
  --radius-md:           10px;
  --radius-lg:           16px;
  --radius-xl:           20px;
  --radius-full:         9999px;

  /* ── Shadows ── */
  --shadow-sm:           0 1px 3px rgba(37, 34, 107, 0.06);
  --shadow-md:           0 4px 12px rgba(37, 34, 107, 0.08);
  --shadow-lg:           0 8px 30px rgba(37, 34, 107, 0.12);
  --shadow-xl:           0 16px 48px rgba(37, 34, 107, 0.16);
  --shadow-card:         0 2px 8px rgba(37, 34, 107, 0.06);
  --shadow-card-hover:   0 8px 24px rgba(37, 34, 107, 0.14);
  --shadow-nav:          0 2px 16px rgba(37, 34, 107, 0.08);

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

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