/* ============================================================
   Mangrovia Labs — Design Tokens
   Colors, Type, Spacing, Radii, Shadows
   Single source of truth. Import wherever you need brand tokens.
   ============================================================ */

/* -------- Webfonts -------- */
/* Display + body + mono. All free. Loaded from Google Fonts CDN.
   If you need them offline, drop self-hosted .woff2 into /fonts and rewrite. */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");

:root {
  /* ============================================================
     COLOR — Mangrovia brand (marketing surface)
     ============================================================ */

  /* Mangrove green — primary brand */
  --mangrove-900: #0F2A1F;   /* primary ink, deep canopy */
  --mangrove-800: #173823;
  --mangrove-700: #1F4A36;   /* hover, dividers */
  --mangrove-500: #2F6B4F;   /* vegetation, links */
  --mangrove-300: #6BA088;
  --mangrove-100: #D5E4DC;

  /* Paper — primary surface */
  --paper-50:  #F5F1EA;      /* page background */
  --paper-100: #EDE7DC;      /* card surface on paper */
  --paper-200: #E2DACB;

  /* Ink — neutrals on paper */
  --ink-900: #161513;
  --ink-800: #2A2823;
  --ink-700: #45413A;
  --ink-500: #6E6A5E;
  --ink-400: #8F8B7E;
  --ink-300: #D6D0C4;
  --ink-200: #E2DDD1;
  --ink-100: #E8E4DC;

  /* Clay — the ONE pop color */
  --clay-700: #9F3B1F;
  --clay-500: #C9512E;       /* signal accent, emphasis */
  --clay-300: #E89878;
  --clay-100: #F7DFD0;

  /* Brackish — supporting teal (data viz, secondary accent) */
  --brackish-700: #2A4F53;
  --brackish-500: #3A6B70;
  --brackish-300: #7DA9AD;
  --brackish-100: #D5E2E3;

  /* Semantic */
  --success: #2F6B4F;        /* maps to mangrove */
  --warning: #C9842E;
  --danger:  #B33A2B;
  --info:    #3A6B70;        /* maps to brackish */

  /* Semantic foreground/background pairs for brand surface */
  --fg1: var(--ink-900);     /* primary text */
  --fg2: var(--ink-700);     /* secondary text */
  --fg3: var(--ink-500);     /* tertiary / captions */
  --fg-inverse: var(--paper-50);
  --bg1: var(--paper-50);    /* page */
  --bg2: var(--paper-100);   /* card */
  --bg3: var(--paper-200);
  --bg-inverse: var(--mangrove-900);
  --border-1: var(--ink-300);
  --border-2: var(--ink-200);
  --link: var(--mangrove-500);
  --link-hover: var(--clay-500);

  /* ============================================================
     TYPE — families
     ============================================================ */
  --font-serif:  "Instrument Serif", "GT Sectra", "Times New Roman", Georgia, serif;
  --font-sans:   "Geist", "Geist Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:   "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* TYPE — token scale (px) */
  --t-display-size:  88px;
  --t-display-line:  1.02;
  --t-display-weight: 400;
  --t-display-tracking: -0.02em;

  --t-h1-size:  56px;
  --t-h1-line:  1.05;
  --t-h1-weight: 400;
  --t-h1-tracking: -0.015em;

  --t-h2-size:  36px;
  --t-h2-line:  1.1;
  --t-h2-weight: 400;
  --t-h2-tracking: -0.01em;

  --t-h3-size:  24px;
  --t-h3-line:  1.2;
  --t-h3-weight: 400;
  --t-h3-tracking: -0.005em;

  --t-body-size: 16px;
  --t-body-line: 1.6;
  --t-body-weight: 300;

  --t-small-size: 14px;
  --t-small-line: 1.55;
  --t-small-weight: 300;

  --t-caption-size: 12px;
  --t-caption-line: 1.4;
  --t-caption-weight: 300;

  --t-eyebrow-size: 12px;
  --t-eyebrow-line: 1.2;
  --t-eyebrow-weight: 400;
  --t-eyebrow-tracking: 0.08em;

  --t-mono-size: 13px;
  --t-mono-line: 1.5;
  --t-mono-weight: 400;

  /* ============================================================
     SPACING — 4px grid
     ============================================================ */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;
  --s-13: 128px;
  --s-14: 160px;
  --s-15: 200px;
  --s-16: 240px;

  /* Layout */
  --max-w-prose: 680px;
  --max-w-container: 1240px;
  --gutter-desktop: 32px;
  --gutter-mobile: 16px;

  /* ============================================================
     RADII
     ============================================================ */
  --r-none: 0;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ============================================================
     SHADOWS — sparing. Paper-and-ink brand, not glassmorphic.
     ============================================================ */
  --shadow-card:  0 1px 2px rgba(15, 42, 31, 0.06), 0 4px 12px rgba(15, 42, 31, 0.04);
  --shadow-elev:  0 2px 6px rgba(15, 42, 31, 0.08), 0 12px 32px rgba(15, 42, 31, 0.08);
  --shadow-focus: 0 0 0 2px var(--paper-50), 0 0 0 4px var(--clay-500);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);  /* default soft out-expo */
  --ease-in:    cubic-bezier(0.32, 0, 0.67, 0);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  180ms;
  --dur-base:  320ms;
  --dur-slow:  600ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply these classes (or these element selectors) for consistent
   type without hand-rolling sizes.
   ============================================================ */

.t-display, .display {
  font-family: var(--font-serif);
  font-size: var(--t-display-size);
  line-height: var(--t-display-line);
  font-weight: var(--t-display-weight);
  letter-spacing: var(--t-display-tracking);
  color: var(--fg1);
}

h1, .t-h1 {
  font-family: var(--font-serif);
  font-size: var(--t-h1-size);
  line-height: var(--t-h1-line);
  font-weight: var(--t-h1-weight);
  letter-spacing: var(--t-h1-tracking);
  color: var(--fg1);
  margin: 0;
}

h2, .t-h2 {
  font-family: var(--font-sans);
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-line);
  font-weight: var(--t-h2-weight);
  letter-spacing: var(--t-h2-tracking);
  color: var(--fg1);
  margin: 0;
}

h3, .t-h3 {
  font-family: var(--font-sans);
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-line);
  font-weight: var(--t-h3-weight);
  letter-spacing: var(--t-h3-tracking);
  color: var(--fg1);
  margin: 0;
}

p, .t-body {
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
  font-weight: var(--t-body-weight);
  color: var(--fg2);
  margin: 0;
  text-wrap: pretty;
}

.t-small { font: var(--t-small-weight) var(--t-small-size)/var(--t-small-line) var(--font-sans); color: var(--fg2); }
.t-caption { font: var(--t-caption-weight) var(--t-caption-size)/var(--t-caption-line) var(--font-sans); color: var(--fg3); }
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow-size);
  line-height: var(--t-eyebrow-line);
  font-weight: var(--t-eyebrow-weight);
  letter-spacing: var(--t-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--fg3);
}

code, .t-mono, pre {
  font-family: var(--font-mono);
  font-size: var(--t-mono-size);
  line-height: var(--t-mono-line);
  color: var(--fg1);
}

a {
  color: var(--link);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); text-decoration: underline; }

/* Paper page scaffold — opt in by adding .page-paper to <body> */
.page-paper {
  background: var(--bg1);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Inverted block (mangrove canopy) — for dark sections */
.surface-canopy {
  background: var(--bg-inverse);
  color: var(--fg-inverse);
}
.surface-canopy p, .surface-canopy .t-body { color: rgba(245, 241, 234, 0.78); }
.surface-canopy h1, .surface-canopy h2, .surface-canopy h3 { color: var(--fg-inverse); }
.surface-canopy a { color: var(--clay-300); }
.surface-canopy a:hover { color: var(--clay-100); }