/* ============================================================
   GREEN SHIELD — Design Tokens
   Colors + Type for Green Finance Initiative / Green Shield Mongolia
   ============================================================ */

/* ---- FONTS (Google Fonts substitutions — flagged in README) ---- */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&family=VT323&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============= COLOR — BRAND ============= */
  /* Forest greens — the heart of the brand */
  --gs-forest-900: #0F3D1F;   /* deepest — body text on cream */
  --gs-forest-800: #14532A;   /* primary brand green — shield strokes, headlines */
  --gs-forest-700: #1F6B3A;   /* mid emerald — buttons, links */
  --gs-forest-600: #2E8B4F;   /* fresh canopy — pill CTAs in badges */
  --gs-forest-500: #4FA968;   /* live foliage — illustration mids */
  --gs-forest-400: #7BC48E;   /* light leaf — backgrounds, soft highlights */
  --gs-forest-300: #B6DEC0;   /* mist green — surfaces */
  --gs-forest-200: #D7ECDB;   /* faint green tint */
  --gs-forest-100: #ECF5EE;   /* near-cream green */

  /* Earth — soil, trunks, desert */
  --gs-earth-900: #4A3416;    /* dark bark */
  --gs-earth-700: #8B6A2A;    /* shield base ochre */
  --gs-earth-600: #A8852E;    /* trunk gold */
  --gs-earth-500: #C4A04A;    /* sand mid */
  --gs-earth-400: #D9BD7A;    /* dune light */
  --gs-earth-300: #E8D5A8;    /* sunlit sand */
  --gs-earth-200: #F2E6C8;    /* faint sand */

  /* Sky — used in saxaul/desert/landscape badges */
  --gs-sky-500: #6FB6C9;
  --gs-sky-400: #9CCFDC;
  --gs-sky-300: #C5E2EA;
  --gs-sky-200: #E2F0F4;

  /* Riparian / water */
  --gs-water-600: #2A8AAE;
  --gs-water-500: #3FA8C9;
  --gs-water-400: #6EC1DC;

  /* ============= COLOR — NEUTRALS / SURFACES ============= */
  --gs-cream: #F5F1E4;          /* primary brand surface — paper-like */
  --gs-cream-soft: #FAF7EE;     /* lighter card surface */
  --gs-cream-deep: #EDE6D2;     /* sectioned alt surface */
  --gs-paper: #FFFEF9;          /* near-white, still warm */
  --gs-ink: #1A2A1F;            /* near-black, slightly green */
  --gs-charcoal: #2C3A30;       /* secondary text */
  --gs-stone: #5A6B5F;          /* tertiary text, muted */
  --gs-mist: #A6B3A9;           /* dividers, subtle UI */
  --gs-fog: #DCE3DD;            /* lines, surfaces */

  /* ============= SEMANTIC ============= */
  --color-bg: var(--gs-cream);
  --color-bg-elevated: var(--gs-cream-soft);
  --color-bg-alt: var(--gs-cream-deep);
  --color-surface: var(--gs-paper);

  --color-fg: var(--gs-forest-900);
  --color-fg-1: var(--gs-forest-900);   /* primary text */
  --color-fg-2: var(--gs-charcoal);     /* secondary */
  --color-fg-3: var(--gs-stone);        /* tertiary / meta */
  --color-fg-muted: var(--gs-mist);

  --color-primary: var(--gs-forest-800);
  --color-primary-hover: var(--gs-forest-700);
  --color-primary-press: var(--gs-forest-900);
  --color-accent: var(--gs-forest-600);   /* the bright pill green */
  --color-accent-hover: var(--gs-forest-500);

  --color-on-primary: var(--gs-cream);
  --color-on-accent: var(--gs-cream);

  --color-border: var(--gs-fog);
  --color-border-strong: var(--gs-forest-800);
  --color-divider: var(--gs-fog);

  /* status */
  --color-success: var(--gs-forest-600);
  --color-warning: var(--gs-earth-600);
  --color-info: var(--gs-water-500);
  --color-danger: #B33A2A;

  /* ============= TYPE — FAMILIES ============= */
  --font-display: 'Archivo Black', 'Archivo', system-ui, sans-serif;
  --font-sans: 'DM Sans', 'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Menlo', monospace;
  --font-pixel: 'VT323', 'JetBrains Mono', ui-monospace, monospace;

  /* ============= TYPE — SCALE ============= */
  /* Display — chunky, all-caps, used sparingly for brand statements */
  --fs-display-2xl: 88px;
  --fs-display-xl: 64px;
  --fs-display-lg: 48px;
  --fs-display-md: 36px;

  /* Headings */
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-h5: 18px;

  /* Body */
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-micro: 11px;

  /* Pixel pill — only on shield badges */
  --fs-pixel-lg: 28px;
  --fs-pixel: 22px;
  --fs-pixel-sm: 18px;

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

  /* tracking */
  --ls-display: -0.02em;     /* tight on big display */
  --ls-heading: -0.01em;
  --ls-body: 0;
  --ls-caps: 0.08em;          /* spaced caps for labels */
  --ls-caps-wide: 0.14em;     /* extra-wide caps for over-eyebrows */

  /* ============= SPACING (4-pt grid) ============= */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ============= RADII ============= */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ============= SHADOWS / ELEVATION ============= */
  /* Soft, naturalistic — the brand avoids glossy/digital drop shadows */
  --shadow-xs: 0 1px 2px rgba(20, 83, 42, 0.06);
  --shadow-sm: 0 2px 6px rgba(20, 83, 42, 0.08), 0 1px 2px rgba(20, 83, 42, 0.04);
  --shadow-md: 0 6px 16px rgba(20, 83, 42, 0.10), 0 2px 4px rgba(20, 83, 42, 0.05);
  --shadow-lg: 0 16px 32px rgba(20, 83, 42, 0.12), 0 4px 8px rgba(20, 83, 42, 0.06);
  --shadow-xl: 0 28px 56px rgba(20, 83, 42, 0.16), 0 8px 16px rgba(20, 83, 42, 0.08);
  --shadow-card: 0 4px 18px rgba(15, 61, 31, 0.08), 0 0 0 1px rgba(15, 61, 31, 0.04);
  --shadow-emboss: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(15, 61, 31, 0.06);

  /* ============= MOTION ============= */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* ============= BORDER WIDTHS ============= */
  --bw-hair: 1px;
  --bw-thin: 1.5px;
  --bw-md: 2px;
  --bw-thick: 3px;
  --bw-shield: 4px;       /* matches the heavy shield stroke */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
html, body { background: var(--color-bg); color: var(--color-fg-1); }
body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; }

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--color-primary);
  text-transform: uppercase;
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--color-primary);
  text-transform: uppercase;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--color-fg-1);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--color-fg-1);
  margin: 0;
}

h5, .h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  color: var(--color-fg-1);
  margin: 0;
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-fg-2);
  text-wrap: pretty;
  margin: 0;
}

.lead {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-fg-2);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

.caps-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-fg-1);
}

.pixel {
  font-family: var(--font-pixel);
  font-size: var(--fs-pixel);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-on-accent);
  line-height: 1;
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--gs-cream-deep);
  padding: 0.12em 0.4em;
  border-radius: var(--r-xs);
  color: var(--gs-forest-900);
}

.meta {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--color-fg-3);
}

a { color: var(--color-primary); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--color-primary-hover); }