/* ============================================================
   TerraMap Properties — Foundations
   colors_and_type.css

   A clean, sleek, institutional system inspired by the
   Guggenheim's Pentagram identity. Primary typeface is Inter
   (the open-source basis of Guggenheim Sans), paired with
   Playfair Display as an editorial serif counterweight.

   Palette is monochrome-first: deep ink, soft stone, warm
   paper. A single earthen accent (Terracotta) plays the role
   of Pentagram's "strategic colour accent."
   ============================================================ */

/* ---------- Fonts ----------
   Using Google Fonts so this file is self-contained.
   If local .woff2 files are dropped into /fonts, replace these
   @import lines with @font-face rules.
------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Typography families ---------- */
  --font-sans:    'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: 'Inter', system-ui, sans-serif; /* bold geometric caps — the "TERRAMAP" feel */

  /* ---------- Type scale (desktop baseline) ----------
     Modular scale ~1.25 (major third), with an institutional
     oversize at the top end for editorial display type.
  ------------------------------------------------------- */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-2xl:   36px;
  --fs-3xl:   48px;
  --fs-4xl:   64px;
  --fs-5xl:   88px;
  --fs-6xl:  120px;

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  /* Letter spacing — a core brand expression.
     TerraMap wordmark lives at ~0.02em; big caps use the same. */
  --ls-tighter: -0.02em;
  --ls-tight:   -0.01em;
  --ls-normal:   0;
  --ls-wide:     0.02em;
  --ls-wider:    0.08em;
  --ls-widest:   0.18em;  /* eyebrow labels, small caps */

  /* Weights */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     800;

  /* ---------- Colour: neutrals (ink → paper) ----------
     The entire brand can live inside this scale alone.
  --------------------------------------------------- */
  --ink:        #0A0A0A;  /* near-black; logo colour */
  --ink-soft:   #1C1C1C;
  --graphite:   #2E2E2E;
  --slate:      #5A5A58;
  --stone:      #8A867E;
  --ash:        #B8B4AB;
  --fog:        #DEDBD3;
  --bone:       #EBE8E0;
  --paper:      #F5F2EA;  /* warm off-white — the default page */
  --chalk:      #FAF8F3;
  --white:      #FFFFFF;

  /* ---------- Colour: earthen accents ----------
     One primary accent + muted supports. Used sparingly —
     Pentagram's rule: "strategic accent, not decoration."
     No reds — the palette lives in ochre / clay / moss / slate.
  --------------------------------------------------- */
  --ochre:          #B8862C;  /* primary accent */
  --ochre-dk:       #8A6220;
  --ochre-lt:       #E4CA8C;
  --clay:           #B08B5C;  /* warm secondary */
  --moss:           #5B6A4C;  /* cool secondary */
  --slate-blue:     #3D5360;  /* cool secondary */
  --umber:          #6B5D3F;  /* deep earth */
  --sand:           #D9C9A8;  /* tint */

  /* ---------- Semantic foreground ---------- */
  --fg-1: var(--ink);       /* primary copy, headlines */
  --fg-2: var(--graphite);  /* body copy */
  --fg-3: var(--slate);     /* secondary, captions */
  --fg-4: var(--stone);     /* tertiary, metadata */
  --fg-muted: var(--ash);
  --fg-inverse: var(--paper);

  /* ---------- Semantic background ---------- */
  --bg-1: var(--paper);     /* default page */
  --bg-2: var(--chalk);     /* raised surface */
  --bg-3: var(--bone);      /* sunken / sidebar */
  --bg-4: var(--fog);       /* deep recess */
  --bg-inverse: var(--ink);

  /* ---------- Borders ---------- */
  --border-1: rgba(10,10,10,0.08);  /* hairline */
  --border-2: rgba(10,10,10,0.14);  /* default */
  --border-3: rgba(10,10,10,0.28);  /* strong */
  --border-ink: var(--ink);

  /* ---------- Accent semantic ---------- */
  --accent:       var(--ochre);
  --accent-fg:    var(--white);
  --accent-hover: var(--ochre-dk);

  /* Status — muted, institutional (no candy colours, no reds).
     "Danger" uses a deep umber; tone/weight carries severity. */
  --success: #4A6B3A;
  --warning: #B88A1F;
  --danger:  #6B5D3F;
  --info:    #3A5A7A;

  /* ---------- Spacing (4px base) ---------- */
  --space-0:  0;
  --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;
  --space-11: 192px;

  /* ---------- Radii ----------
     Sharp by default. Radii exist but are almost never > 4px.
     Corners communicate institution; we only soften tiny ui bits.
  ------------------------------------------------------------ */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-full: 999px;

  /* ---------- Elevation ----------
     Very restrained. Real institutional UIs lean on hairlines,
     not shadows. These are for menus / modals only.
  ------------------------------------------------------------ */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(10,10,10,0.06);
  --shadow-2: 0 1px 2px rgba(10,10,10,0.06), 0 1px 3px rgba(10,10,10,0.04);
  --shadow-3: 0 4px 12px rgba(10,10,10,0.08), 0 1px 2px rgba(10,10,10,0.04);
  --shadow-4: 0 12px 32px rgba(10,10,10,0.12), 0 2px 6px rgba(10,10,10,0.06);

  /* ---------- Motion ----------
     Subtle fades + gentle eases. No bounces.
  ------------------------------------------------------------ */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
  --ease-entrance: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0.0, 1, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   400ms;
  --dur-slowest: 700ms;

  /* ---------- Layout ---------- */
  --container-sm:   640px;
  --container-md:   960px;
  --container-lg:  1200px;
  --container-xl:  1440px;
  --gutter:         32px;
}

/* ============================================================
   Semantic text styles — the "h1 / h2 / p / code" layer
   ============================================================ */

/* Base */
html {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Display ---------- */
.t-display-xl,
.t-display-lg,
.t-display-md {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
.t-display-xl { font-size: var(--fs-6xl); }
.t-display-lg { font-size: var(--fs-5xl); }
.t-display-md { font-size: var(--fs-4xl); }

/* Editorial serif display — for pull quotes, section intros */
.t-editorial-xl,
.t-editorial-lg {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  color: var(--fg-1);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  text-wrap: balance;
}
.t-editorial-xl { font-size: var(--fs-5xl); }
.t-editorial-lg { font-size: var(--fs-4xl); }
.t-editorial-lg em, .t-editorial-xl em { font-style: italic; }

/* ---------- Headings ---------- */
h1, .t-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
}
h2, .t-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
}
h3, .t-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h4, .t-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* ---------- Body ---------- */
p, .t-body {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.t-body-lg { font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--fg-2); }
.t-body-sm { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--fg-2); }

.t-lead {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* ---------- Eyebrow / label — a TerraMap signature ---------- */
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--fg-3);
}
.t-label {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  color: var(--fg-2);
}

/* ---------- Caption / meta ---------- */
.t-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

/* ---------- Mono / code ---------- */
code, .t-code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg-1);
}

/* ---------- Link ---------- */
a {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-standard),
              text-decoration-color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--ochre); text-decoration-color: var(--ochre); }