/* ============================================================
   Ndanjila Travel and Tours - Design Tokens (single source)
   Edit values here to re-theme the entire site.
   ============================================================ */

:root {
  /* ---- Brand colors ---- */
  --color-primary: #0a1c2b;          /* brand navy */
  --color-primary-light: #14304a;
  --color-primary-dark: #061320;

  /* Secondary: elegant orange (PLACEHOLDER - confirm brand hex) */
  --color-secondary: #e08a3c;
  --color-secondary-light: #f0a45e;
  --color-secondary-dark: #c06f28;

  /* ---- Neutrals & surfaces ---- */
  --color-bg: #ffffff;
  --color-surface: #f5f6f8;
  --color-surface-alt: #eef1f4;
  --color-border: #dfe4e8;

  /* ---- Text ---- */
  --color-text: #1a2630;
  --color-heading: #0a1c2b;
  --color-muted: #5b6b78;
  --color-on-primary: #ffffff;       /* text on navy */
  --color-on-secondary: #ffffff;     /* text on orange */

  /* ---- Typography ---- */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-300: 0.875rem;   /* 14px */
  --fs-400: 1rem;       /* 16px base */
  --fs-500: 1.25rem;    /* 20px */
  --fs-600: 1.5rem;     /* 24px */
  --fs-700: 2rem;       /* 32px */
  --fs-800: 2.75rem;    /* 44px */
  --fs-900: 3.5rem;     /* 56px hero */

  --lh-tight: 1.15;
  --lh-base: 1.65;

  /* ---- Spacing scale ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 820px;
  --gutter: 1.25rem;
  --header-height: 7rem;
  --header-logo-height: calc(var(--header-height) - var(--space-1));
  --header-height-mobile: 4.75rem;
  --header-logo-height-mobile: 3.75rem;
  --header-gutter: var(--space-3);

  /* ---- UI ---- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(10, 28, 43, 0.08);
  --shadow-md: 0 8px 24px rgba(10, 28, 43, 0.12);
  --shadow-lg: 0 18px 50px rgba(10, 28, 43, 0.18);

  /* ---- Motion ---- */
  --transition-fast: 150ms ease;
  --transition: 250ms ease;

  /* ---- Layering ---- */
  --z-header: 1000;
  --z-overlay: 1100;
}