/* =========================================================================
   Wild as Two — Design Tokens
   ----------------------------------------------------------------
   Editorial overland adventure brand. Warm natural palette inspired by
   the route between desert and tropics: sand, ochre, jungle, emerald water,
   ink-black charcoal. High-contrast literary serif paired with a
   humanist sans and a technical mono for coordinates / metadata.
   ========================================================================= */

/* ---- Webfonts (Google Fonts — see README for substitution notes) -------- */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* =====================================================================
     COLOR — Brand Palette
     ===================================================================== */

  /* Neutrals — bone / paper / ink ------------------------------------------ */
  --bone:        #F6EFE0;   /* primary paper / off-white background */
  --bone-soft:   #FBF7EC;   /* lightest neutral, card surface on darks */
  --paper:       #F0E6D2;   /* warm canvas, second neutral */
  --sand:        #E5D3B0;   /* sandstone / kraft */
  --dune:        #C7A878;   /* faded dune, secondary surface */
  --stone:       #8A7A63;   /* muted earth, body text on light */
  --charcoal:    #1C1A17;   /* primary ink */
  --ink:         #0E0D0B;   /* deepest black, headlines / logos */

  /* Warms — sun / animal / clay ------------------------------------------- */
  --sun:         #E8A33D;   /* late afternoon sun */
  --ochre:       #C97A3B;   /* savanna ochre, primary warm accent */
  --terracotta:  #A8512B;   /* clay, deeper warm */
  --rust:        #7A361C;   /* roof rack rust / dried earth */
  --ember:       #D8472C;   /* sunset coral, alert / emphasis */

  /* Greens — jungle / sage / moss ----------------------------------------- */
  --moss:        #6C8A4E;   /* sage moss, soft natural green */
  --jungle:      #2D5A3D;   /* deep jungle, primary cool accent */
  --forest:      #1A3A2A;   /* darkest green, backgrounds */
  --leaf:        #8FB26B;   /* fresh leaf, highlights */

  /* Blues — water / sky --------------------------------------------------- */
  --emerald:     #1E8B7A;   /* emerald water — signature accent */
  --lagoon:      #4FB3A4;   /* shallow lagoon */
  --deep-water:  #134E58;   /* deep ocean, dark accent */
  --sky:         #B8D4D2;   /* hazy sky, soft tint */

  /* =====================================================================
     COLOR — Semantic
     ===================================================================== */
  --bg:          var(--bone);
  --bg-alt:      var(--paper);
  --bg-dark:     var(--ink);
  --bg-elev:     var(--bone-soft);

  --fg:          var(--ink);
  --fg-1:        var(--charcoal);
  --fg-2:        var(--stone);
  --fg-3:        #B7A687;          /* muted, metadata */
  --fg-inverse:  var(--bone);

  --accent:      var(--ochre);     /* primary brand accent */
  --accent-2:    var(--emerald);   /* signature secondary */
  --accent-3:    var(--jungle);    /* deep contrast accent */

  --line:        #DCC9A6;          /* hairline / divider on light */
  --line-strong: var(--charcoal);
  --line-dark:   #2A2823;          /* hairline on dark surfaces */

  --success:     var(--moss);
  --warning:     var(--sun);
  --danger:      var(--ember);
  --info:        var(--emerald);

  /* Signature gradients --------------------------------------------------- */
  --grad-route:    linear-gradient(95deg, #E5D3B0 0%, #C97A3B 35%, #6C8A4E 65%, #1E8B7A 100%);
  --grad-horizon:  linear-gradient(180deg, #F6EFE0 0%, #E8A33D 60%, #A8512B 100%);
  --grad-jungle:   linear-gradient(160deg, #2D5A3D 0%, #1E8B7A 100%);
  --grad-dusk:     linear-gradient(180deg, #134E58 0%, #7A361C 100%);

  /* =====================================================================
     TYPOGRAPHY
     ===================================================================== */
  --font-display: 'Instrument Serif', 'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans:    'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Scale — modular, slightly editorial (ratio ~1.25) ----------------------- */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;
  --fs-112: 7rem;
  --fs-160: 10rem;

  /* Line-heights */
  --lh-tight:   1.02;
  --lh-display: 1.05;
  --lh-snug:    1.2;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  /* Letter-spacing */
  --tracking-tight:    -0.02em;
  --tracking-normal:    0;
  --tracking-wide:      0.04em;
  --tracking-mono:      0.02em;
  --tracking-caps:      0.18em;   /* eyebrow / label caps */
  --tracking-caps-wide: 0.28em;   /* stamp caps */

  /* =====================================================================
     SPACING / RADII / SHADOW / LAYERS
     ===================================================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --radius-0:  0;
  --radius-1:  2px;       /* hairline rounded — preferred */
  --radius-2:  4px;
  --radius-3:  8px;
  --radius-4:  12px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 0 rgba(28,26,23,0.06), 0 1px 2px rgba(28,26,23,0.04);
  --shadow-2: 0 4px 12px rgba(28,26,23,0.08), 0 1px 2px rgba(28,26,23,0.04);
  --shadow-3: 0 18px 40px -16px rgba(28,26,23,0.22), 0 4px 12px rgba(28,26,23,0.06);
  --shadow-stamp: inset 0 0 0 1.5px currentColor;

  --max-content: 1200px;
  --max-prose:   680px;

  /* =====================================================================
     MOTION
     ===================================================================== */
  --ease-out:   cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-slow:  cubic-bezier(.16,.84,.44,1);
  --dur-fast:    140ms;
  --dur-base:    240ms;
  --dur-slow:    520ms;
}

/* =========================================================================
   BASE — body / type primitives
   ========================================================================= */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----- Display headings ----- */
.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0;
}
.h-display em, h1.display em { font-style: italic; }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-64);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-40);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  margin: 0;
}

/* ----- Body text ----- */
p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0;
}
.lead {
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  line-height: 1.45;
  color: var(--fg-1);
  font-weight: 400;
}
.small {
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--fg-2);
}

/* ----- Eyebrow / label caps — signature device ----- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-2);
}
.stamp {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-wide);
  color: var(--accent);
}

/* ----- Mono — for coords, dates, metadata ----- */
.mono, code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--tracking-mono);
  font-variant-numeric: tabular-nums;
}

/* ----- Editorial display flourishes ----- */
.display-italic { font-style: italic; font-feature-settings: "ss02"; }
.drop-cap::first-letter {
  font-family: var(--font-display);
  font-size: 4.6em;
  line-height: 0.85;
  float: left;
  padding: 0.08em 0.1em 0 0;
  color: var(--accent);
}

/* ----- Links ----- */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
  transition: text-decoration-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
a:hover {
  text-decoration-color: currentColor;
  color: var(--accent);
}

/* ----- Selection ----- */
::selection { background: var(--ochre); color: var(--bone); }