@charset "UTF-8";
/* ============================================================
   TOKENS — Design system custom properties
   Source: All 6 HTML prototypes (home, about, country,
           city, destinations, single)
   DO NOT add values here that are not in the HTML source.
============================================================ */

:root {
  /* ----------------------------------------------------------
     BRAND COLOURS
  ---------------------------------------------------------- */
  --color-brand-primary: #bc5118;
  --color-brand-secondary: #3f635f;
  --color-brand-dark: #1a3238;

  /* ----------------------------------------------------------
     BACKGROUND COLOURS
  ---------------------------------------------------------- */
  --color-bg-base: #fafafa;
  --color-bg-warm: #fef5f0;

  /* ----------------------------------------------------------
     HIGHLIGHT COLOURS
  ---------------------------------------------------------- */
  --color-highlight-yellow-bg: #fff8e6;
  --color-highlight-green-bg: #e8f5f5;
  --color-highlight-blue-bg: #e6f3ff;
  --color-highlight-blue-text: #3498db;
  --color-status-error: #c0392b;

  /* ----------------------------------------------------------
     BORDER
  ---------------------------------------------------------- */
  --color-border-subtle: #dde4e9;

  /* ----------------------------------------------------------
     TEXT COLOURS
  ---------------------------------------------------------- */
  --color-text-main: #505f66;
  --color-text-muted: #6b6b6b;
  --color-text-heading: #1a3238;
  --color-text-inverse: #fafafa;

  /* ----------------------------------------------------------
     WHITE / BLACK ALPHA
  ---------------------------------------------------------- */
  --color-white-70: rgba(255, 255, 255, 0.82);
  --color-white-90: rgba(255, 255, 255, 0.9);
  --color-white-100: #ffffff;

  /* ----------------------------------------------------------
     WEATHER COLOURS (country page)
  ---------------------------------------------------------- */
  --w-sun: #f5a623;
  --w-rain: #4a90e2;
  --w-cloud: #8fa3ad;
  --w-snow: #6ec6ff;
  --w-storm: #6b59d3;

  /* ----------------------------------------------------------
     TYPOGRAPHY
  ---------------------------------------------------------- */
  --font-serif: "Fraunces", Georgia, serif;
  --font-sans: "Manrope", system-ui, sans-serif;

  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --line-height-base: 1.7;

  /* ----------------------------------------------------------
     TYPE SCALE
     All clamp() values taken verbatim from prototypes.
  ---------------------------------------------------------- */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: clamp(0.9375rem, 1.05vw + 0.4rem, 1rem);
  --text-md: 1.0625rem;
  --text-lg: clamp(1.1rem, 2vw, 1.25rem);
  --text-xl: clamp(1.25rem, 2.5vw, 1.5rem);
  --text-2xl: clamp(1.6rem, 3.5vw, 2.2rem);
  --text-3xl: clamp(2rem, 4.5vw, 2.6rem);

  /* ----------------------------------------------------------
     SPACING
  ---------------------------------------------------------- */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 56px;
  --space-4xl: 72px;
  --space-5xl: 96px;

  /* ----------------------------------------------------------
     BORDER RADIUS
  ---------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     SHADOWS
  ---------------------------------------------------------- */
  --shadow-xs: 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.09);
  --shadow-lg: 0 20px 52px rgba(0, 0, 0, 0.14);

  /* ----------------------------------------------------------
     Z-INDEX SCALE
  ---------------------------------------------------------- */
  --z-base: 1;
  --z-header: 100;
  --z-overlay: 2000;

  /* ----------------------------------------------------------
     MOTION
  ---------------------------------------------------------- */
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */
  --max-w: 1200px;
  --article-max-w: 820px;
  --cta-max-w: 560px;
  --content-w: 720px; /* about page content column */
  --sidebar-w: 280px; /* single post sidebar */
  --pad-h: clamp(16px, 4vw, 32px);
  --section-v: clamp(56px, 7vw, 96px);

  /* ----------------------------------------------------------
     COMPONENT SIZES
  ---------------------------------------------------------- */
  --nav-pill-h: 44px;
  --header-h: 68px;

  /* ----------------------------------------------------------
     SAFE AREAS (iOS notch support)
  ---------------------------------------------------------- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ----------------------------------------------------------
     BREAKPOINTS POLICY (Reference only)
     Mobile:  768px (Tablets/Phones)
     Desktop: 1024px (Small Laptops)
  ---------------------------------------------------------- */

  /* ----------------------------------------------------------
     HIGH-DPI MOBILE OPTIMIZATION
     Targets ultra-dense screens (iPhone Pro, Samsung Ultra)
     for improved editorial legibility.
  ---------------------------------------------------------- */
  @media (max-width: 480px) and (-webkit-min-device-pixel-ratio: 3),
    (max-width: 480px) and (min-resolution: 3dppx) {
    --text-xs: 0.8125rem; /* +8% */
    --text-sm: 0.9375rem; /* +7% */
    --text-base: 1.02rem; /* +8.8% vs mobile clamp min */
    --text-md: 1.125rem; /* +6% */

    /* Slightly more breathable body text */
    --line-height-base: 1.75;
  }
}