@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');
/* fonts.css */
/* ============================================================
   SOMOS IMPACT TRAVEL — WEBFONTS
   --------------------------------------------------------------
   FONT SUBSTITUTION NOTE (please confirm / replace):
   The logo wordmark "somos.travel" is set in a rounded geometric
   sans. We have no source font file, so we approximate it with
   QUICKSAND from Google Fonts — used only for the wordmark / brand
   accents. If you have the original logo font, drop the files in
   assets/fonts/ and replace the Quicksand @import below.

   - Quicksand  → brand / rounded display (logo-adjacent)
   - Spectral   → editorial serif headlines & pull quotes
   - Hanken Grotesk → body, UI, labels
   ============================================================ */



/* colors.css */
/* ============================================================
   SOMOS IMPACT TRAVEL — COLOR TOKENS
   Source palette (color_palette.pdf):
     Forest    #4A7C59   Terracotta #D97449
     Deep Sea  #264653   Sand       #F4E3D7
   Scales are tuned around those four anchors.
   ============================================================ */

:root {
  /* --- Forest (green) — growth, the local leader, the field --- */
  --forest-50:  #eef3ef;
  --forest-100: #d6e3d9;
  --forest-200: #aec8b4;
  --forest-300: #84ab8e;
  --forest-400: #628f6e;
  --forest-500: #4a7c59;  /* brand anchor */
  --forest-600: #3d6649;
  --forest-700: #2f4f39;
  --forest-800: #233b2b;
  --forest-900: #18281e;

  /* --- Terracotta (orange) — the traveler, energy, encounter --- */
  --terra-50:  #fcf0ea;
  --terra-100: #f8dccf;
  --terra-200: #f0b69e;
  --terra-300: #e89070;
  --terra-400: #e07a55;
  --terra-500: #d97449;  /* brand anchor */
  --terra-600: #c25c33;
  --terra-700: #9c4727;
  --terra-800: #74351e;
  --terra-900: #4d2314;

  /* --- Deep Sea (navy/slate) — depth, trust, the river, ink --- */
  --deepsea-50:  #eef2f3;
  --deepsea-100: #d3dde0;
  --deepsea-200: #a3b8bd;
  --deepsea-300: #6f8d95;
  --deepsea-400: #436670;
  --deepsea-500: #264653;  /* brand anchor */
  --deepsea-600: #1f3a45;
  --deepsea-700: #182d36;
  --deepsea-800: #122229;
  --deepsea-900: #0b161b;

  /* --- Sand (cream) — paper, calm, the negative space of the mark --- */
  --sand-50:  #fefcfa;
  --sand-100: #faf3ec;
  --sand-200: #f4e3d7;  /* brand anchor */
  --sand-300: #ebd2c0;
  --sand-400: #ddbca5;
  --sand-500: #c9a187;

  /* --- True neutrals (warm-tinted grays, derived from deep sea) --- */
  --white:    #ffffff;
  --gray-50:  #f7f8f8;
  --gray-100: #eceeef;
  --gray-200: #dde1e2;
  --gray-300: #c2c9cb;
  --gray-400: #9aa4a7;
  --gray-500: #6f7b7e;
  --gray-600: #515b5e;
  --gray-700: #3a4245;
  --gray-800: #262d30;
  --gray-900: #161b1d;

  /* ----------------------------------------------------------
     SEMANTIC ALIASES — reference these in product code
     ---------------------------------------------------------- */

  /* Brand */
  --brand-forest:   var(--forest-500);
  --brand-terra:    var(--terra-500);
  --brand-deepsea:  var(--deepsea-500);
  --brand-sand:     var(--sand-200);

  /* Surfaces */
  --surface-page:      var(--sand-100);   /* warm paper — default site bg */
  --surface-page-alt:  var(--sand-200);   /* sand band / alternating section */
  --surface-card:      var(--white);
  --surface-raised:    var(--white);
  --surface-ink:       var(--deepsea-500); /* dark sections, footer */
  --surface-ink-deep:  var(--deepsea-700);
  --surface-sunken:    var(--gray-50);

  /* Text */
  --text-strong:    var(--deepsea-500);  /* headlines, ink on light */
  --text-body:      var(--deepsea-600);
  --text-muted:     var(--gray-500);
  --text-subtle:    var(--gray-400);
  --text-on-ink:    var(--sand-100);     /* body text on dark */
  --text-on-ink-strong: var(--sand-50);
  --text-on-brand:  var(--sand-50);      /* on terra / forest fills */
  --text-link:      var(--terra-600);

  /* Lines & borders */
  --border-subtle:  var(--sand-300);
  --border-default: var(--gray-200);
  --border-strong:  var(--deepsea-500);
  --border-on-ink:  rgba(244, 227, 215, 0.18);

  /* Interactive — primary = terracotta, the action color */
  --action:          var(--terra-500);
  --action-hover:    var(--terra-600);
  --action-active:   var(--terra-700);
  --action-soft:     var(--terra-50);
  --on-action:       var(--sand-50);

  /* Interactive — secondary = forest */
  --action-2:        var(--forest-500);
  --action-2-hover:  var(--forest-600);
  --action-2-active: var(--forest-700);
  --action-2-soft:   var(--forest-50);

  /* Focus ring */
  --focus-ring: var(--terra-400);

  /* Status (kept within the warm/earthy family) */
  --success:     #3d7a52;
  --success-soft:#e7f0e9;
  --warning:     #c9892f;
  --warning-soft:#faf0dd;
  --danger:      #b8442c;
  --danger-soft: #f8e3dd;
  --info:        var(--deepsea-400);
  --info-soft:   var(--deepsea-50);
}

/* typography.css */
/* ============================================================
   SOMOS IMPACT TRAVEL — TYPOGRAPHY TOKENS
   Spectral (serif display) · Hanken Grotesk (sans body/UI)
   Quicksand (rounded brand accent, logo-adjacent)
   ============================================================ */

:root {
  /* Families */
  --font-display: 'Spectral', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-brand:   'Quicksand', var(--font-sans);
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-extra:   800;

  /* Type scale — fluid, anchored at a 1.250 (major third) ramp */
  --text-2xs: 0.6875rem;  /* 11px — overline micro */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.875rem;   /* 14px */
  --text-md:  1rem;       /* 16px — base */
  --text-lg:  1.125rem;   /* 18px — lead body */
  --text-xl:  1.375rem;   /* 22px */
  --text-2xl: 1.75rem;    /* 28px */
  --text-3xl: 2.25rem;    /* 36px */
  --text-4xl: clamp(2.5rem, 5vw, 3.5rem);    /* 40→56 */
  --text-5xl: clamp(3rem, 7vw, 4.75rem);     /* 48→76 */
  --text-6xl: clamp(3.75rem, 9vw, 6rem);     /* 60→96 */

  /* Line heights */
  --leading-tight:   1.05;
  --leading-snug:    1.18;
  --leading-heading: 1.12;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-overline:0.16em;  /* eyebrow / overline caps */

  /* --- Semantic roles --- */
  --display-font:    var(--font-display);
  --display-weight:  var(--weight-semibold);
  --display-leading: var(--leading-heading);
  --display-tracking:var(--tracking-tight);

  --heading-font:    var(--font-display);
  --heading-weight:  var(--weight-semibold);

  --eyebrow-font:    var(--font-brand);
  --eyebrow-weight:  var(--weight-bold);
  --eyebrow-tracking:var(--tracking-overline);
  --eyebrow-size:    var(--text-2xs);

  --body-font:    var(--font-sans);
  --body-weight:  var(--weight-regular);
  --body-leading: var(--leading-relaxed);
  --body-size:    var(--text-md);

  --label-font:   var(--font-sans);
  --label-weight: var(--weight-semibold);

  --quote-font:   var(--font-display);
  --quote-style:  italic; /* @kind other */
}

/* spacing.css */
/* ============================================================
   SOMOS IMPACT TRAVEL — SPACING, RADIUS, SHADOW, MOTION, LAYOUT
   ============================================================ */

:root {
  /* Spacing scale — 4px base unit */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  2.5rem;    /* 40 */
  --space-8:  3rem;      /* 48 */
  --space-9:  4rem;      /* 64 */
  --space-10: 5rem;      /* 80 */
  --space-11: 6.5rem;    /* 104 */
  --space-12: 8rem;      /* 128 */

  /* Radius — soft, rounded to echo the circular mark & Quicksand wordmark */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Borders */
  --border-hairline: 1px;
  --border-thin:     1.5px;
  --border-thick:    2px;

  /* Shadows — warm-tinted, soft & low; never harsh black.
     Tinted with the deep-sea anchor for an earthy lift. */
  --shadow-xs:  0 1px 2px rgba(38, 70, 83, 0.06);
  --shadow-sm:  0 2px 6px rgba(38, 70, 83, 0.08);
  --shadow-md:  0 8px 20px -6px rgba(38, 70, 83, 0.14);
  --shadow-lg:  0 18px 40px -12px rgba(38, 70, 83, 0.20);
  --shadow-xl:  0 32px 64px -18px rgba(38, 70, 83, 0.26);
  --shadow-focus: 0 0 0 3px var(--terra-100);
  --shadow-inset: inset 0 1px 2px rgba(38, 70, 83, 0.08);

  /* Motion — calm, grounded. Gentle ease, no bounce. */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --duration-fast:   140ms; /* @kind other */
  --duration-normal: 240ms; /* @kind other */
  --duration-slow:   420ms; /* @kind other */
  --duration-reveal: 720ms; /* @kind other */

  /* Layout */
  --container-sm: 640px;
  --container-md: 820px;
  --container-lg: 1080px;
  --container-xl: 1240px;
  --gutter:       clamp(1.25rem, 5vw, 4rem); /* @kind spacing */
  --section-y:    clamp(4rem, 8vw, 8rem); /* @kind spacing */
  --z-base: 0; /* @kind other */
  --z-raised: 10; /* @kind other */
  --z-sticky: 100; /* @kind other */
  --z-overlay: 1000; /* @kind other */
  --z-modal: 1100; /* @kind other */
  --z-toast: 1200; /* @kind other */
}

/* base.css */
/* ============================================================
   SOMOS IMPACT TRAVEL — BASE / RESET + ELEMENT DEFAULTS
   Light reset and brand-flavored element defaults so raw HTML
   already feels like Somos. Tokens come from the other files.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings — editorial serif */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  color: var(--text-strong);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--text-5xl); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--text-link); text-decoration-color: color-mix(in srgb, var(--text-link) 35%, transparent); text-underline-offset: 0.18em; transition: color var(--duration-fast) var(--ease-standard); }
a:hover { color: var(--action-active); }

strong, b { font-weight: var(--weight-bold); color: var(--text-strong); }
small { font-size: var(--text-sm); }

blockquote {
  font-family: var(--quote-font);
  font-style: var(--quote-style);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--text-strong);
  margin: var(--space-6) 0;
  padding-left: var(--space-5);
  border-left: 3px solid var(--brand-terra);
}

code, pre, kbd { font-family: var(--font-mono); font-size: 0.9em; }
hr { border: none; border-top: var(--border-hairline) solid var(--border-default); margin: var(--space-6) 0; }
img { max-width: 100%; display: block; }

::selection { background: var(--terra-200); color: var(--deepsea-700); }

:focus-visible { outline: var(--border-thick) solid var(--focus-ring); outline-offset: 2px; }

/* ----- A few brand helpers used across cards & kits ----- */

.somos-eyebrow {
  font-family: var(--eyebrow-font);
  font-weight: var(--eyebrow-weight);
  font-size: var(--eyebrow-size);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--brand-terra);
}

.somos-wordmark {
  font-family: var(--font-brand);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  color: var(--brand-deepsea);
}

/* Hand-drawn-feel underline accent for key words */
.somos-underline {
  background-image: linear-gradient(var(--brand-terra), var(--brand-terra));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.22em;
  padding-bottom: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}