/* =====================================================================
   ALPINE ACE — Core Tokens: Color + Type
   An independent Himalayan expedition journal that happens to organize treks.
   ---------------------------------------------------------------------
   Fonts (substitutions flagged in README):
     Clash Display → wide, heavy display (Fontshare CDN) — matches brand ref
     Archivo       → functional grotesque body / UI (Google)
     Space Mono    → field-note labels, coordinates, route markings (Google)
     Caveat        → handwritten annotations, used sparingly (Google)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Caveat:wght@500;600&family=Shadows+Into+Light&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@500,700&display=swap');

:root {
  /* ---------- COLOR — Surfaces (warm journal paper) ---------- */
  --paper:        #FFFFFF;  /* base page */
  --paper-raised: #F8F8F8;  /* cards, raised surfaces */
  --snow:         #FFFFFF;  /* highest surface / inputs */
  --paper-sunk:   #EBEBEB;  /* wells, inset rows */

  /* ---------- COLOR — Ink (text on paper) ---------- */
  --ink:    #1C1916;  /* primary text, near-black */
  --ink-2:  #443D33;  /* secondary text */
  --ink-3:  #756B5C;  /* muted / captions */
  --ink-4:  #A79C89;  /* faint / disabled */

  /* ---------- COLOR — Signal (expedition orange) ---------- */
  --signal:        #D7531D;  /* primary accent, route marker */
  --signal-deep:   #AE3F14;  /* pressed / hover-dark */
  --signal-bright: #EC6326;  /* highlight */
  --signal-soft:   #F0DAC8;  /* tint surface */

  /* ---------- COLOR — Pine (deep forest, on dark sections) ---------- */
  --pine:    #28342B;  /* dark surface / footers */
  --pine-2:  #3C4D40;  /* raised on pine */
  --pine-3:  #5A6E5C;

  /* ---------- COLOR — Slate (cool mountain blue) ---------- */
  --slate:       #546B77;  /* secondary accent, links on paper */
  --slate-soft:  #CFD9DA;  /* tint */

  /* ---------- COLOR — Stone (warm neutral scale) ---------- */
  --stone-50:   #F4EFE6;
  --stone-100:  #E8E0D2;
  --stone-200:  #D6CCB9;
  --stone-300:  #BBAF98;
  --stone-400:  #9A8E77;
  --stone-500:  #7A6F5B;
  --stone-600:  #5C5344;

  /* ---------- COLOR — Lines & hairlines (topographic grid) ---------- */
  --line:         rgba(28, 25, 22, 0.14);
  --line-strong:  rgba(28, 25, 22, 0.34);
  --line-faint:   rgba(28, 25, 22, 0.07);
  --line-ondark:  rgba(241, 234, 221, 0.20);

  /* ---------- COLOR — On-photo scrims ---------- */
  --scrim-top:    linear-gradient(180deg, rgba(20,17,14,0.55) 0%, rgba(20,17,14,0) 55%);
  --scrim-bottom: linear-gradient(0deg, rgba(20,17,14,0.78) 0%, rgba(20,17,14,0) 60%);

  /* ---------- TYPE — Families ---------- */
  --font-display: 'Clash Display', 'Arial Black', system-ui, sans-serif;
  --font-sans:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-script:  'Caveat', 'Segoe Script', cursive;

  /* ---------- TYPE — Scale (editorial; px @ 16px root) ---------- */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    22px;
  --text-xl:    28px;
  --text-2xl:   38px;
  --text-3xl:   52px;
  --text-4xl:   74px;
  --text-5xl:   104px;
  --text-6xl:   148px;

  /* ---------- TYPE — Tracking ---------- */
  --track-tight:  -0.02em;
  --track-normal:  0em;
  --track-label:   0.14em;   /* mono eyebrows / labels */
  --track-stamp:   0.22em;   /* travel-stamp lettering */

  /* ---------- RADIUS (minimal — functional, not soft) ---------- */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---------- ELEVATION (low, dry, paper-like) ---------- */
  --shadow-sm:  0 1px 2px rgba(28,25,22,0.10);
  --shadow-md:  0 6px 20px rgba(28,25,22,0.12);
  --shadow-lg:  0 18px 48px rgba(28,25,22,0.18);
  --inset-well: inset 0 1px 2px rgba(28,25,22,0.10);
}

/* =====================================================================
   SEMANTIC TYPE ROLES
   ===================================================================== */

.aa-display {            /* hero / poster headline */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-5xl);
  line-height: 0.92;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--ink);
}

.aa-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: 0.94;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--ink);
}

.aa-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

.aa-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.12;
  letter-spacing: var(--track-tight);
  color: var(--ink);
}

.aa-eyebrow {            /* mono label / coordinate / route tag */
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--signal);
}

.aa-label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-xs);
  line-height: 1.3;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.aa-lead {               /* intro paragraph */
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--ink-2);
}

.aa-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink-2);
}

.aa-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink-3);
}

.aa-note {               /* handwritten field annotation */
  font-family: var(--font-script);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--ink-2);
}