/* ============================================================
   INSIDE KENYA SAFARIS — Design System Foundations
   Version: 1.0 · April 2026 · OD-IKS-001
   ============================================================ */

/* ── FONTS ────────────────────────────────────────────────── */

@font-face {
  font-family: 'Scotch Display';
  src: url('./fonts/ScotchDisplay-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Scotch Display';
  src: url('./fonts/ScotchDisplay-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Scotch Display';
  src: url('./fonts/ScotchDisplay-Roman.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Scotch Display';
  src: url('./fonts/ScotchDisplay-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Scotch Display';
  src: url('./fonts/ScotchDisplay-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Scotch Display';
  src: url('./fonts/ScotchDisplay-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Scotch Display';
  src: url('./fonts/ScotchDisplay-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Scotch Display';
  src: url('./fonts/ScotchDisplay-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Scotch Display';
  src: url('./fonts/ScotchDisplay-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Scotch Display';
  src: url('./fonts/ScotchDisplay-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Scotch Display';
  src: url('./fonts/ScotchDisplay-Fat.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Scotch Display';
  src: url('./fonts/ScotchDisplay-FatItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Flex';
  src: url('./fonts/RobotoFlex-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── BASE COLOUR TOKENS ───────────────────────────────────── */

:root {
  /* Palette */
  --forest-night:      #1A3C2E;
  --savannah-gold:     #B8962E;
  --dry-season-cream:  #F5F0E8;
  --dark-earth:        #2C1A0E;
  --mara-green:        #2E5C40;
  --morning-mist:      #EAF0EC;
  --kopje-stone:       #8B7355;
  --dust-season:       #D4C4A0;

  /* Derived / hover states */
  --savannah-gold-dark: #a48628;

  /* Surfaces */
  --bg-page:           var(--dry-season-cream);
  --bg-surface:        #FFFFFF;
  --bg-surface-muted:  var(--morning-mist);
  --bg-dark:           var(--forest-night);

  /* Text */
  --text-primary:      var(--dark-earth);
  --text-heading:      var(--forest-night);
  --text-muted:        var(--kopje-stone);
  --text-accent:       var(--mara-green);
  --text-on-dark:      var(--dry-season-cream);
  --text-on-dark-muted:var(--dust-season);

  /* Actions */
  --action-primary:    var(--savannah-gold);
  --action-primary-on: #FFFFFF;

  /* Borders & rules */
  --rule-subtle:       rgba(26, 60, 46, 0.12);
  --rule-default:      rgba(26, 60, 46, 0.15);
  --rule-strong:       var(--savannah-gold);

  /* ── TYPE SCALE ─────────────────────────────────────────── */
  --font-display:      'Scotch Display', Georgia, serif;
  --font-body:         'Roboto Flex', system-ui, sans-serif;

  /* Sizes */
  --size-display-xl:   4.5rem;   /* 72px — hero headlines */
  --size-display-lg:   3.5rem;   /* 56px — section openers */
  --size-display-md:   2.5rem;   /* 40px — page titles */
  --size-display-sm:   1.75rem;  /* 28px — card titles */
  --size-heading:      1.375rem; /* 22px — sub-section */
  --size-lede:         1.25rem;  /* 20px — pull quotes */
  --size-eyebrow:      0.6875rem;/* 11px — labels */
  --size-body-lg:      1.125rem; /* 18px — long-form */
  --size-body:         1rem;     /* 16px — default */
  --size-body-sm:      0.875rem; /* 14px — captions */
  --size-label:        0.75rem;  /* 12px — UI labels */
  --size-meta:         0.6875rem;/* 11px — meta */

  /* Line heights */
  --lh-display-xl:     1.0;
  --lh-display-lg:     1.05;
  --lh-display-md:     1.1;
  --lh-display-sm:     1.2;
  --lh-heading:        1.3;
  --lh-lede:           1.45;
  --lh-eyebrow:        1.2;
  --lh-body-lg:        1.65;
  --lh-body:           1.6;
  --lh-body-sm:        1.55;
  --lh-label:          1.4;
  --lh-meta:           1.5;

  /* Spacing scale */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-12:  48px;
  --space-16:  64px;
  --space-24:  96px;
  --space-32:  128px;

  /* Motion */
  --duration-fast:     150ms;
  --duration-base:     300ms;
  --duration-slow:     600ms;
  --ease-editorial:    cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Layout */
  --max-w-page:        1280px;
  --max-w-content:     1024px;
  --max-w-reading:     720px;
  --max-w-body-copy:   70ch;
}

/* ── SEMANTIC ELEMENT DEFAULTS ────────────────────────────── */

body {
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  font-variation-settings: 'wght' 380, 'opsz' 14;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: 300;
}

h1 {
  font-size: var(--size-display-xl);
  line-height: var(--lh-display-xl);
  max-width: 24ch;
  letter-spacing: -0.018em;
}

h2 {
  font-size: var(--size-display-lg);
  line-height: var(--lh-display-lg);
  max-width: 42ch;
  letter-spacing: -0.015em;
}

h3 {
  font-size: var(--size-display-md);
  line-height: var(--lh-display-md);
}

h4 {
  font-size: var(--size-display-sm);
  line-height: var(--lh-display-sm);
}

h5 {
  font-size: var(--size-heading);
  line-height: var(--lh-heading);
  font-weight: 500;
}

p {
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  max-width: var(--max-w-body-copy);
}

em {
  font-style: italic;
  color: var(--text-accent);
}

/* ── UTILITY CLASSES ──────────────────────────────────────── */

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--size-eyebrow);
  font-variation-settings: 'wght' 600;
  line-height: var(--lh-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--savannah-gold);
}

.display-xl { font-family: var(--font-display); font-size: var(--size-display-xl); line-height: var(--lh-display-xl); font-weight: 300; letter-spacing: -0.018em; color: var(--text-heading); }
.display-lg { font-family: var(--font-display); font-size: var(--size-display-lg); line-height: var(--lh-display-lg); font-weight: 300; letter-spacing: -0.015em; color: var(--text-heading); }
.display-md { font-family: var(--font-display); font-size: var(--size-display-md); line-height: var(--lh-display-md); font-weight: 400; color: var(--text-heading); }
.display-sm { font-family: var(--font-display); font-size: var(--size-display-sm); line-height: var(--lh-display-sm); font-weight: 400; color: var(--text-heading); }
.lede       { font-family: var(--font-display); font-size: var(--size-lede);       line-height: var(--lh-lede);       font-weight: 300; font-style: italic; color: var(--text-heading); }
.body-lg    { font-family: var(--font-body);    font-size: var(--size-body-lg);    line-height: var(--lh-body-lg);    font-variation-settings: 'wght' 380; }
.body       { font-family: var(--font-body);    font-size: var(--size-body);       line-height: var(--lh-body);       font-variation-settings: 'wght' 380; }
.body-sm    { font-family: var(--font-body);    font-size: var(--size-body-sm);    line-height: var(--lh-body-sm);    font-variation-settings: 'wght' 400; }
.label      { font-family: var(--font-body);    font-size: var(--size-label);      line-height: var(--lh-label);      font-variation-settings: 'wght' 500; }
.meta       { font-family: var(--font-body);    font-size: var(--size-meta);       line-height: var(--lh-meta);       font-variation-settings: 'wght' 500; color: var(--text-muted); }

/* ── BUTTONS ──────────────────────────────────────────────── */

.btn-primary {
  display: inline-block;
  background: var(--savannah-gold);
  color: #FFFFFF;
  padding: 12px 32px;
  font-family: var(--font-body);
  font-variation-settings: 'wght' 600;
  font-size: var(--size-body-sm);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  border: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-editorial);
}
.btn-primary:hover { background: var(--savannah-gold-dark); }
.btn-primary:focus-visible { outline: 2px solid var(--savannah-gold); outline-offset: 2px; }

.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--forest-night);
  padding: 11px 32px;
  font-family: var(--font-body);
  font-variation-settings: 'wght' 500;
  font-size: var(--size-body-sm);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  border: 1px solid var(--forest-night);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-editorial), color var(--duration-fast) var(--ease-editorial);
}
.btn-secondary:hover { background: var(--forest-night); color: var(--dry-season-cream); }
.btn-secondary:focus-visible { outline: 2px solid var(--savannah-gold); outline-offset: 2px; }

/* Ghost button — for use on dark backgrounds */
.btn-ghost {
  display: inline-block;
  background: transparent;
  color: var(--dry-season-cream);
  padding: 11px 32px;
  font-family: var(--font-body);
  font-variation-settings: 'wght' 500;
  font-size: var(--size-body-sm);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  border: 1px solid var(--dust-season);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-editorial), color var(--duration-fast) var(--ease-editorial);
}
.btn-ghost:hover { background: var(--dust-season); color: var(--dark-earth); }

/* ── CARDS ────────────────────────────────────────────────── */

.card {
  background: #FFFFFF;
  border: 1px solid var(--rule-subtle);
  padding: var(--space-8);
}

.card-muted {
  background: var(--bg-surface-muted);
  border: 1px solid var(--rule-subtle);
  padding: var(--space-8);
}

/* ── CALLOUT SURFACES ─────────────────────────────────────── */

.callout {
  background: var(--morning-mist);
  border-left: 3px solid var(--savannah-gold);
  padding: var(--space-6);
}

.vision-block {
  background: var(--forest-night);
  color: var(--dry-season-cream);
  padding: var(--space-12);
  position: relative;
}
.vision-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 160px; height: 4px;
  background: var(--savannah-gold);
}

/* ── DIVIDERS ─────────────────────────────────────────────── */

.rule-subtle  { border: none; border-top: 1px solid var(--rule-subtle); }
.rule-default { border: none; border-top: 1px solid var(--rule-default); }
.rule-accent  { border: none; border-top: 1px solid var(--savannah-gold); width: 160px; }

/* ── MOTION HELPERS ───────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .fade-in-up {
    animation: fadeInUp var(--duration-slow) var(--ease-editorial) both;
  }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}