/* ============================================================
   Earthrise Ventures — Colors & Type
   Single source of truth. Import once in any HTML that uses
   the brand system:
       <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

/* ---------- Fonts ------------------------------------------
   Aeroport is the brand's primary face. Files bundled under
   `fonts/` and loaded via @font-face below.
   JetBrains Mono is a download-free network fallback only and
   should not actually render where Aeroport loads.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Aeroport';
  src: url('fonts/Aeroport-light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aeroport';
  src: url('fonts/Aeroport-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aeroport Mono';
  src: url('fonts/Aeroport-monospaced.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Core neutrals (do the heavy lifting) ---------- */
  --c-black-hole:  #000000;   /* text, rules, primary logo */
  --c-white-noise: #FFFFFF;   /* primary background */
  --c-aeris-light: #D8D5CB;   /* the "house" warm off-white background */
  --c-aeris-dark:  #C7C2B2;   /* secondary neutral */

  /* ---------- Accent pairs (sparingly) --------------------- */
  --c-terra-light: #B8835F;
  --c-terra-dark:  #93674A;   /* Recommendation accent only */
  --c-flora-light: #798F7E;
  --c-flora-dark:  #627265;   /* only acceptable colored logo variant */
  --c-aqua-light:  #7B9EA5;
  --c-aqua-dark:   #60777C;

  /* ---------- Semantic tokens ------------------------------ */
  --fg:           var(--c-black-hole);
  --fg-mute:      #2b2b2b;
  --fg-quiet:     rgba(0,0,0,0.55);
  --bg:           var(--c-white-noise);
  --bg-warm:      var(--c-aeris-light);   /* preferred page fill */
  --bg-warm-2:    var(--c-aeris-dark);
  --rule:         var(--c-black-hole);    /* always full black, hairline */
  --rule-mute:    rgba(0,0,0,0.18);
  --rule-thin:    rgba(0,0,0,0.16);

  /* ---------- Type families -------------------------------- */
  --font-display: 'Aeroport', 'Helvetica Neue', Arial, sans-serif;            /* Light */
  --font-body:    'Aeroport', 'Helvetica Neue', Arial, sans-serif;            /* Regular */
  --font-mono:    'Aeroport Mono', 'JetBrains Mono', 'IBM Plex Mono',
                  ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type weights --------------------------------- */
  --w-light:    300; /* @kind font */
  --w-regular:  400; /* @kind font */
  --w-medium:   500; /* @kind font */

  /* ---------- Numeric scales ------------------------------- */
  --rule-weight: 1px;
  --radius-0:   0px;     /* the brand has no radii — flat by default */
  --radius-1:   2px;     /* only for inputs / focus states */
  --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;
  --space-10:  128px;
}

/* ============================================================
   TYPE — semantic helpers
   H1  48px / 95%  / Light  / title or sentence case
   H2  28px / 110% / Regular
   H3  16px Mono   / 140%   / 5% tracking / UPPERCASE
   H4  10px Mono   / 140%   / sentence case (caption/metadata)
   P   20px        / 140%   / Regular
   ============================================================ */
.h1, h1.er { font: var(--w-light) 48px/0.95 var(--font-display); letter-spacing: -0.01em; color: var(--fg); margin: 0; }
.h2, h2.er { font: var(--w-regular) 28px/1.10 var(--font-body); color: var(--fg); margin: 0; }
.h3, h3.er {
  font: var(--w-regular) 16px/1.40 var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}
.h4, h4.er {
  font: var(--w-regular) 10px/1.40 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--fg);
  margin: 0;
}
.p, p.er { font: var(--w-regular) 20px/1.40 var(--font-body); color: var(--fg); margin: 0; }

/* Document-grade type (used inside memo pages) */
.h-doc     { font: var(--w-light) 44px/0.98 var(--font-display); letter-spacing: -0.015em; margin: 0; }
.h-section { font: var(--w-light) 34px/1.02 var(--font-display); letter-spacing: -0.012em; margin: 0 0 12px 0; }
.h-sub     { font: var(--w-regular) 20px/1.2 var(--font-body); letter-spacing: -0.005em; margin: 20px 0 8px; }
.h-sub-mono {
  font: var(--w-regular) 11px/1.4 var(--font-mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin: 18px 0 6px;
}
.lede { font: var(--w-regular) 18px/1.5 var(--font-body); max-width: 68ch; margin: 0 0 10px; }

/* ---------- Eyebrow / metadata / numbered labels ---------- */
.eyebrow {
  font: var(--w-regular) 10px/1.40 var(--font-mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg);
}
.eyebrow-lg {
  font: var(--w-regular) 12px/1.40 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
}
.meta {
  font: var(--w-regular) 10px/1.40 var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--fg);
}
.caption {
  font: var(--w-regular) 11px/1.40 var(--font-mono);
  color: var(--fg);
}
.mono { font-family: var(--font-mono); }

/* Section eyebrow ("§ 02 · Recommendation") */
.section-eyebrow {
  font: var(--w-regular) 10px/1.4 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* TK placeholder chip — Terra Dark accent, used inline */
.tk {
  font-family: var(--font-mono);
  font-size: 0.88em;
  letter-spacing: 0.06em;
  background: var(--c-aeris-light);
  padding: 0 5px;
  border: 1px solid rgba(0,0,0,0.25);
  color: var(--c-terra-dark);
}

/* ---------- Page chrome ------------------------------------ */
.er-rule       { height: 1px; background: var(--rule); width: 100%; }
.er-rule-thin  { height: 1px; background: var(--rule-mute); width: 100%; }
.er-page       { background: var(--bg-warm); color: var(--fg); font-family: var(--font-body); }
.er-page-white { background: var(--bg);      color: var(--fg); font-family: var(--font-body); }