/* =========================================================================
   TravelKit SR — Design System (Foundation Tokens)
   Derived from the official TravelKit SR Ltd logo.
   Single source of truth for colours, typography, spacing, radii, shadows,
   buttons, forms, breakpoints, and motion. No page-level styles here.
   ========================================================================= */

:root {

  /* ---------------------------------------------------------------------
     1. BRAND COLOURS  (extracted from logo)
     --------------------------------------------------------------------- */

  /* Primary — Deep Ocean Blue (TRAVEL KIT wordmark) */
  --tk-primary-50:  #EAF1FB;
  --tk-primary-100: #C9DAF3;
  --tk-primary-200: #94B3E3;
  --tk-primary-300: #5F8CD3;
  --tk-primary-400: #2E62B8;
  --tk-primary-500: #163F8C;   /* mid tone */
  --tk-primary-600: #0F2C5E;   /* BRAND PRIMARY */
  --tk-primary-700: #0B234C;
  --tk-primary-800: #081B3B;
  --tk-primary-900: #05122A;

  /* Secondary — Suriname Green (suitcase + "SR Ltd") */
  --tk-secondary-50:  #E8F7EE;
  --tk-secondary-100: #C6ECD3;
  --tk-secondary-200: #93DBAD;
  --tk-secondary-300: #5FC787;
  --tk-secondary-400: #38B368;
  --tk-secondary-500: #2FA84F;   /* BRAND SECONDARY */
  --tk-secondary-600: #248740;
  --tk-secondary-700: #1B6631;
  --tk-secondary-800: #124623;
  --tk-secondary-900: #0A2913;

  /* Accent — Sunlit Gold (swoosh + airplane) */
  --tk-accent-50:  #FEF6E4;
  --tk-accent-100: #FCE7B5;
  --tk-accent-200: #F9D07A;
  --tk-accent-300: #F7BB4C;
  --tk-accent-400: #F5A623;   /* BRAND ACCENT */
  --tk-accent-500: #DE9017;
  --tk-accent-600: #B67611;
  --tk-accent-700: #855609;
  --tk-accent-800: #593904;
  --tk-accent-900: #2E1D02;

  /* Tertiary tint — Sky (globe base) */
  --tk-sky-50:  #F2FAFD;
  --tk-sky-100: #DFF1F9;
  --tk-sky-200: #B8E4F2;   /* logo globe tone */
  --tk-sky-300: #8ED2E8;
  --tk-sky-400: #5BBADB;

  /* ---------------------------------------------------------------------
     2. NEUTRALS
     --------------------------------------------------------------------- */
  --tk-white:     #FFFFFF;
  --tk-gray-50:   #F7FAFC;
  --tk-gray-100:  #EEF2F6;
  --tk-gray-200:  #E5E7EB;
  --tk-gray-300:  #D1D5DB;
  --tk-gray-400:  #9CA3AF;
  --tk-gray-500:  #6B7280;
  --tk-gray-600:  #4B5563;
  --tk-gray-700:  #374151;
  --tk-gray-800:  #1F2937;
  --tk-gray-900:  #111827;
  --tk-black:     #0A0F1A;

  /* ---------------------------------------------------------------------
     3. SEMANTIC / SYSTEM COLOURS
     --------------------------------------------------------------------- */
  --tk-success:  #16A34A;
  --tk-info:     #0284C7;
  --tk-warning:  #F59E0B;
  --tk-danger:   #DC2626;

  /* ---------------------------------------------------------------------
     4. SURFACE & TEXT ROLES  (use these in components, not the raw scales)
     --------------------------------------------------------------------- */
  --tk-bg:              var(--tk-white);
  --tk-bg-soft:         var(--tk-gray-50);
  --tk-bg-subtle:       var(--tk-primary-50);
  --tk-bg-inverse:      var(--tk-primary-600);
  --tk-bg-inverse-deep: var(--tk-primary-800);

  --tk-text:            var(--tk-gray-800);
  --tk-text-strong:     var(--tk-primary-600);
  --tk-text-muted:      var(--tk-gray-500);
  --tk-text-inverse:    var(--tk-white);
  --tk-text-link:       var(--tk-primary-600);
  --tk-text-link-hover: var(--tk-secondary-500);

  --tk-border:          var(--tk-gray-200);
  --tk-border-strong:   var(--tk-gray-300);
  --tk-border-focus:    var(--tk-primary-500);

  /* ---------------------------------------------------------------------
     5. TYPOGRAPHY
     Google Fonts: Manrope (headings) + Inter (body).
     Both have full Latin Extended coverage — safe for Dutch diacritics.
     --------------------------------------------------------------------- */
  --tk-font-heading: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tk-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tk-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale — clamp(min, preferred, max) for responsive without media queries */
  --tk-fs-xs:   0.75rem;                             /* 12px */
  --tk-fs-sm:   0.875rem;                            /* 14px */
  --tk-fs-base: 1rem;                                /* 16px */
  --tk-fs-lg:   1.125rem;                            /* 18px */
  --tk-fs-xl:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --tk-fs-2xl:  clamp(1.5rem,  1.35rem + 0.75vw, 1.875rem);
  --tk-fs-3xl:  clamp(1.875rem, 1.6rem + 1.25vw, 2.5rem);
  --tk-fs-4xl:  clamp(2.25rem, 1.85rem + 2vw,   3.25rem);
  --tk-fs-5xl:  clamp(2.75rem, 2.1rem + 3vw,    4rem);

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

  --tk-lh-tight:  1.15;
  --tk-lh-snug:   1.35;
  --tk-lh-normal: 1.55;
  --tk-lh-loose:  1.75;

  --tk-ls-tight:  -0.02em;
  --tk-ls-normal: 0;
  --tk-ls-wide:   0.04em;

  /* ---------------------------------------------------------------------
     6. SPACING SCALE  (4px base grid)
     --------------------------------------------------------------------- */
  --tk-space-0:  0;
  --tk-space-1:  0.25rem;   /*  4px */
  --tk-space-2:  0.5rem;    /*  8px */
  --tk-space-3:  0.75rem;   /* 12px */
  --tk-space-4:  1rem;      /* 16px */
  --tk-space-5:  1.25rem;   /* 20px */
  --tk-space-6:  1.5rem;    /* 24px */
  --tk-space-8:  2rem;      /* 32px */
  --tk-space-10: 2.5rem;    /* 40px */
  --tk-space-12: 3rem;      /* 48px */
  --tk-space-16: 4rem;      /* 64px */
  --tk-space-20: 5rem;      /* 80px */
  --tk-space-24: 6rem;      /* 96px */
  --tk-space-32: 8rem;      /* 128px */

  /* Section rhythm (vertical padding for full-width blocks) */
  --tk-section-y-sm: clamp(2.5rem, 4vw, 4rem);
  --tk-section-y-md: clamp(4rem,   6vw, 6rem);
  --tk-section-y-lg: clamp(5rem,   8vw, 8rem);

  /* ---------------------------------------------------------------------
     7. BORDER RADIUS
     --------------------------------------------------------------------- */
  --tk-radius-xs:   4px;
  --tk-radius-sm:   6px;
  --tk-radius-md:   10px;
  --tk-radius-lg:   14px;
  --tk-radius-xl:   20px;
  --tk-radius-2xl:  28px;
  --tk-radius-pill: 999px;
  --tk-radius-circle: 50%;

  /* Component defaults */
  --tk-radius-button: var(--tk-radius-pill);
  --tk-radius-input:  var(--tk-radius-md);
  --tk-radius-card:   var(--tk-radius-xl);
  --tk-radius-modal:  var(--tk-radius-2xl);

  /* ---------------------------------------------------------------------
     8. SHADOWS  (soft, premium — layered)
     --------------------------------------------------------------------- */
  --tk-shadow-xs:   0 1px 2px rgba(15, 44, 94, 0.05);
  --tk-shadow-sm:   0 2px 6px rgba(15, 44, 94, 0.06);
  --tk-shadow-md:   0 6px 18px rgba(15, 44, 94, 0.08);
  --tk-shadow-lg:   0 14px 40px rgba(15, 44, 94, 0.10);
  --tk-shadow-xl:   0 24px 60px rgba(15, 44, 94, 0.14);
  --tk-shadow-focus: 0 0 0 4px rgba(46, 98, 184, 0.20);   /* accessibility ring */
  --tk-shadow-focus-green: 0 0 0 4px rgba(47, 168, 79, 0.22);

  /* ---------------------------------------------------------------------
     9. MOTION
     --------------------------------------------------------------------- */
  --tk-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --tk-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --tk-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --tk-dur-fast:    150ms;
  --tk-dur-base:    220ms;
  --tk-dur-slow:    360ms;

  /* ---------------------------------------------------------------------
     10. LAYOUT
     --------------------------------------------------------------------- */
  --tk-container-max:   1200px;
  --tk-container-wide:  1320px;
  --tk-container-x-pad: clamp(1rem, 4vw, 2rem);

  --tk-header-height:   96px;
  --tk-header-height-scrolled: 76px;

  --tk-z-nav:      1000;
  --tk-z-dropdown: 1050;
  --tk-z-sticky:   1100;
  --tk-z-modal:    1200;
  --tk-z-toast:    1300;
  --tk-z-whatsapp: 1400;   /* floating WhatsApp CTA */
}

/* =========================================================================
   BREAKPOINTS  (mobile-first; matches Bootstrap 5.3 for consistency)
   xs:  <576px    (default, no media query needed)
   sm:  ≥576px
   md:  ≥768px
   lg:  ≥992px
   xl:  ≥1200px
   xxl: ≥1400px
   ========================================================================= */

/* =========================================================================
   REDUCED MOTION  — respect user preference (WCAG 2.3.3)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --tk-dur-fast: 0ms;
    --tk-dur-base: 0ms;
    --tk-dur-slow: 0ms;
  }
}