/* ======================================================================
   CCM Carbon Capture Materials — Colors & Type
   Source of truth for tokens. Primary system matches ccm-technology.com.
   ====================================================================== */

/* ----------------------------------------------------------------------
   FONTS — TEXTA (brand typeface, provided as TTF)
   Fallback: Manrope (sans) via Google Fonts for places where TEXTA
   is not licensed / available. Body fallback: Inter. IBM Plex Mono
   for code and technical labels.
   ---------------------------------------------------------------------- */

@font-face { font-family: "Texta"; src: url("fonts/TEXTA-Thin.ttf")    format("truetype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Texta"; src: url("fonts/TEXTA-Light.ttf")   format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Texta"; src: url("fonts/TEXTA-Book.ttf")    format("truetype"); font-weight: 350; font-style: normal; font-display: swap; }
@font-face { font-family: "Texta"; src: url("fonts/TEXTA-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Texta"; src: url("fonts/TEXTA-Medium.ttf")  format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Texta"; src: url("fonts/TEXTA-Bold.ttf")    format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Texta"; src: url("fonts/TEXTA-Heavy.ttf")   format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Texta"; src: url("fonts/TEXTA-Black.ttf")   format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Texta"; src: url("fonts/TEXTA-Italic.ttf")       format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Texta"; src: url("fonts/TEXTA-BookItalic.ttf")   format("truetype"); font-weight: 350; font-style: italic; font-display: swap; }
@font-face { font-family: "Texta"; src: url("fonts/TEXTA-MediumItalic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Texta"; src: url("fonts/TEXTA-BoldItalic.ttf")   format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }

/* CDN fallbacks (for environments without the local fonts) */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------------------------------------------------------------
     COLORS — Primary (dark / web)
     The live site runs on a near-black tech background + emerald
     accent. These are the tokens that match the deployed product.
     --------------------------------------------------------------- */

  /* Surfaces — deep-space blue-black, never pure #000 */
  --bg-0:        #070b0f;  /* footer, deepest */
  --bg-1:        #080c10;  /* section alt */
  --bg-2:        #0a0f14;  /* primary background */
  --bg-3:        #0d1520;  /* popover / elevated */
  --bg-4:        #10192a;  /* tooltip / highest */

  /* Foregrounds — warm neutrals on dark */
  --fg-1:        #ffffff;              /* primary text */
  --fg-2:        rgba(255,255,255,0.70); /* secondary */
  --fg-3:        #9ca3af;              /* tertiary (gray-400) */
  --fg-4:        #6b7280;              /* muted (gray-500) */
  --fg-5:        #4b5563;              /* disabled (gray-600) */

  /* Hairlines — all white-alpha, never pure grey */
  --line-1:      rgba(255,255,255,0.06);
  --line-2:      rgba(255,255,255,0.10);
  --line-3:      rgba(255,255,255,0.20);

  /* Surface tints — white-alpha cards + hover states */
  --tint-02:     rgba(255,255,255,0.02);
  --tint-03:     rgba(255,255,255,0.03);
  --tint-04:     rgba(255,255,255,0.04);
  --tint-05:     rgba(255,255,255,0.05);
  --tint-06:     rgba(255,255,255,0.06);
  --tint-10:     rgba(255,255,255,0.10);

  /* Emerald — primary brand accent (from Tailwind emerald-300..700) */
  --emerald-300: #6ee7b7;
  --emerald-400: #34d399;
  --emerald-500: #10b981;   /* primary */
  --emerald-600: #059669;
  --emerald-700: #047857;

  /* Emerald tints (used constantly on the site for badges/icons/glows) */
  --emerald-tint-05:  rgba(16,185,129,0.05);
  --emerald-tint-10:  rgba(16,185,129,0.10);
  --emerald-tint-20:  rgba(16,185,129,0.20);
  --emerald-tint-30:  rgba(16,185,129,0.30);
  --emerald-glow:     rgba(16,185,129,0.25);

  /* Semantic */
  --primary:          var(--emerald-500);
  --primary-hover:    var(--emerald-400);
  --primary-fg:       #ffffff;
  --danger:           #f87171;
  --warning:          #fbbf24;
  --success:          var(--emerald-400);

  /* ---------------------------------------------------------------
     COLORS — Brand guideline (light / print)
     From CCM_BRAND GUIDELINE.pdf. Used for print, stationery, and
     light-mode surfaces (e.g. the white funding-partners panel).
     --------------------------------------------------------------- */
  --carbon-charcoal:  #1E2328;   /* deep carbon — headlines on light */
  --mineral-green:    #2F5D50;   /* muted lab green — print primary */
  --lab-white:        #F6F5F1;   /* warm paper */
  --slate-grey:       #6C7881;   /* metadata */
  --biochar-brown:    #7A5C46;   /* warm earth accent */

  /* ---------------------------------------------------------------
     TYPE FAMILIES
     --------------------------------------------------------------- */
  --font-display: "Texta", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Texta", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------------------------------------------------------------
     TYPE SCALE — modular, based on rem at 16px root
     --------------------------------------------------------------- */
  --text-xs:   0.75rem;   /* 12 — micro labels */
  --text-sm:   0.875rem;  /* 14 — body small, metadata */
  --text-base: 1rem;      /* 16 — body */
  --text-lg:   1.125rem;  /* 18 — lead */
  --text-xl:   1.25rem;   /* 20 */
  --text-2xl:  1.5rem;    /* 24 — card title */
  --text-3xl:  1.875rem;  /* 30 — section */
  --text-4xl:  2.25rem;   /* 36 */
  --text-5xl:  3rem;      /* 48 — H2 large */
  --text-6xl:  3.75rem;   /* 60 — H1 */
  --text-7xl:  4.5rem;    /* 72 — hero */

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   900;

  /* Leading & tracking */
  --leading-tight:   1.05;   /* hero */
  --leading-snug:    1.2;    /* headings */
  --leading-normal:  1.5;    /* body */
  --leading-relaxed: 1.65;   /* long paragraphs */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-widest: 0.18em; /* eyebrow labels */

  /* ---------------------------------------------------------------
     SPACING — 4px base, following tailwind scale
     --------------------------------------------------------------- */
  --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.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */
  --space-28: 7rem;      /* 112 — section Y padding */
  --space-36: 9rem;      /* 144 — large section Y padding */

  /* ---------------------------------------------------------------
     RADII — heavily-used full pills, soft cards, chunky modules
     --------------------------------------------------------------- */
  --radius-sm:   0.375rem; /*  6 */
  --radius-md:   0.5rem;   /*  8 */
  --radius-lg:   0.75rem;  /* 12 — inputs */
  --radius-xl:   1rem;     /* 16 — buttons-square */
  --radius-2xl:  1.25rem;  /* 20 — popover */
  --radius-3xl:  1.5rem;   /* 24 — cards */
  --radius-4xl:  2rem;     /* 32 — large modules */
  --radius-full: 9999px;   /* pills, CTAs */

  /* ---------------------------------------------------------------
     SHADOWS & GLOWS — soft, low, with emerald glow for emphasis
     --------------------------------------------------------------- */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.25);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg:   0 12px 32px rgba(0,0,0,0.45);
  --shadow-xl:   0 24px 60px rgba(0,0,0,0.55);
  --glow-sm:     0 8px 24px rgba(16,185,129,0.20);
  --glow-md:     0 12px 36px rgba(16,185,129,0.25);
  --glow-lg:     0 16px 48px rgba(16,185,129,0.40);

  /* ---------------------------------------------------------------
     MOTION — calm, never bouncy
     --------------------------------------------------------------- */
  --ease-out:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:       150ms;
  --dur-base:       300ms;
  --dur-slow:       500ms;
  --dur-dramatic:   700ms;

  /* ---------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------- */
  --container:   80rem;      /* 1280 — max-w-7xl */
  --container-p: 1.5rem;     /* 24 — px-6 on desktop */
  --nav-height:  5rem;       /* 80 */
}

/* ----------------------------------------------------------------------
   SEMANTIC TYPE — apply via element selectors or classes.
   Keep classes composable with utilities.
   ---------------------------------------------------------------------- */

html, body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  background: var(--bg-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--text-5xl), 6vw, var(--text-7xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-3);
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg-3);
}

.small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-4);
}

/* Eyebrow — the tiny emerald pill+label above every section heading.
   The single most recognisable CCM type treatment. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  background: var(--emerald-tint-10);
  border: 1px solid var(--emerald-tint-20);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--emerald-400);
}
.eyebrow::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--emerald-400);
}

/* Gradient accent on hero/CTA words — emerald-300 → emerald-500 */
.accent-gradient {
  background: linear-gradient(90deg, var(--emerald-300), var(--emerald-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}