/* ==========================================================================
   Kala Travel Agency — Design tokens
   Load ORDER: this file first, then vendors.css, then main.css, then
   kala-overrides.css last. See the design system doc (CLAUDE.md §1, §2, §4).

   This file only DEFINES tokens. It is safe to load before the base
   template CSS: everything lives in the --kala-* namespace, except the §1.2
   semantic aliases in the --color-* namespace. Of those, only --color-border
   collides with the template — the template's :root wins here (loads later),
   and kala-overrides.css re-asserts the token value last. Every other
   --color-* alias below is unused by the template and exists for new markup.
   ========================================================================== */

:root {
  /* ---- §1.1 Brand — primary ------------------------------------------- */
  --kala-blue-50:  #EEF5FE;
  --kala-blue-100: #D7E8FD;
  --kala-blue-300: #7FB3F7;
  --kala-blue-500: #1C7BF0;
  --kala-blue-600: #0A6BE8; /* Kala Blue — the brand */
  --kala-blue-700: #0B55B4;
  --kala-blue-900: #0A2E5C;

  /* ---- §1.1 Brand — accent (coral: deals, urgency, savings only) ------ */
  --kala-coral-50:  #FFF3EF;
  --kala-coral-100: #FFE7E0;
  --kala-coral-300: #FFA88F;
  --kala-coral-500: #FF6B4A; /* fill only */
  --kala-coral-600: #E85433;
  --kala-coral-700: #B03A1B; /* the only coral safe for text */

  /* ---- §1.1 Neutral --------------------------------------------------- */
  --kala-neutral-0:   #FFFFFF;
  --kala-neutral-50:  #F5F7FA;
  --kala-neutral-100: #E9EDF3;
  --kala-neutral-300: #C3CBD8;
  --kala-neutral-500: #6B7891;
  --kala-neutral-700: #38455A;
  --kala-neutral-900: #0D1520;

  /* ---- §1.1 Semantic status ------------------------------------------- */
  --kala-success: #12A87A;
  --kala-warning: #F2A93B;
  --kala-error:   #D6413B;

  /* ---- §1.2 Semantic aliases (reference these in NEW markup) ---------- */
  --color-bg:            var(--kala-neutral-50);
  --color-surface:       var(--kala-neutral-0);
  --color-surface-sunk:  var(--kala-neutral-50);
  --color-border-strong: var(--kala-neutral-300);

  --color-text:          var(--kala-neutral-900);
  --color-text-muted:    var(--kala-neutral-700);
  --color-text-subtle:   var(--kala-neutral-500);
  --color-text-inverse:  var(--kala-neutral-0);

  --color-action:        var(--kala-blue-600);
  --color-action-hover:  var(--kala-blue-700);
  --color-action-subtle: var(--kala-blue-50);
  --color-focus:         var(--kala-blue-500);

  --color-accent:        var(--kala-coral-500); /* fills, badges */
  --color-accent-text:   var(--kala-coral-700); /* words */
  --color-accent-subtle: var(--kala-coral-100);

  --color-dark-band:     var(--kala-blue-900);

  /* ---- §2.1 Type families --------------------------------------------- */
  --kala-font-sans:    'Outfit', system-ui, -apple-system, sans-serif;
  --kala-font-display: 'Instrument Serif', Georgia, serif;

  /* ---- §2.2 Type scale (shorthand font: values) ----------------------- */
  --text-display:       600 60px/1.02 var(--kala-font-sans);
  --text-h1:            600 40px/1.1  var(--kala-font-sans);
  --text-h2:            600 30px/1.2  var(--kala-font-sans);
  --text-h3:            600 19px/1.4  var(--kala-font-sans);
  --text-body-lg:       400 19px/1.55 var(--kala-font-sans);
  --text-body:          400 16px/1.6  var(--kala-font-sans);
  --text-small:         400 14px/1.6  var(--kala-font-sans);
  --text-label:         500 13px/1.4  var(--kala-font-sans);
  --text-display-serif: italic 400 44px/1.1 var(--kala-font-display);

  /* ---- §4 Shape ------------------------------------------------------- */
  --kala-radius-sm:   8px;   /* chips, small controls */
  --kala-radius-md:   12px;  /* inputs, buttons, tiles */
  --kala-radius-lg:   20px;  /* cards, panels */
  --kala-radius-pill: 999px; /* nav buttons, badges */

  /* ---- §4 Spacing (4px scale) ----------------------------------------- */
  --kala-space-1:  4px;
  --kala-space-2:  8px;
  --kala-space-3:  12px;
  --kala-space-4:  16px;
  --kala-space-6:  24px;
  --kala-space-8:  32px;
  --kala-space-12: 48px;
  --kala-space-16: 64px;

  /* ---- §4 Elevation --------------------------------------------------- */
  --kala-shadow-card:  0 16px 34px -22px rgb(13 21 32 / 0.45);
  --kala-shadow-float: 0 20px 50px -24px rgb(13 21 32 / 0.40);

  /* ---- §4 Layout ------------------------------------------------------ */
  --kala-container: 1240px;
  --kala-gutter:    40px; /* 20px below 768px */
}

@media (max-width: 767.98px) {
  :root { --kala-gutter: 20px; }
}