/* Metomic — Design tokens  ·  v2.1 (homepage-sync edition)
   Type system: Clash Grotesk (geometric display) + Inter (sans body)
   + JetBrains Mono (tabular / test-data / code — product-UI role only).
   Restraint-led palette: warm off-white & deep ink surfaces, purple in moments.
   Token names below are paired with the canonical Figma/Webflow style names
   (Black, Blue Violet, Cararra, Cod Gray, Jumbo, Moon Raker) sampled from the
   live Metomic Homepage board, so this sheet stays in sync with production.
   Handbook names also noted; functional --m-* keys are the API.
   ────────────────────────────────────────── */

/* JetBrains Mono — loaded from Google Fonts (no self-hosted file yet).
   @import must precede all rules, so it sits above the @font-face blocks. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Fonts ──
   Clash Grotesk (display) is self-hosted from /fonts.
   Inter (body) self-hosts too once the file is uploaded to /fonts;
   until then the Google Fonts <link> in each HTML file + the system
   fallback stack render it. Do not substitute a different family. */
@font-face {
  font-family: 'Clash Grotesk';
  src: url('fonts/ClashGrotesk-Variable.ttf') format('truetype-variations'),
       url('fonts/ClashGrotesk-Variable.ttf') format('truetype');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('https://rsms.me/inter/font-files/InterVariable.woff2') format('woff2-variations'),
       url('https://rsms.me/inter/font-files/InterVariable.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Brand purple ──
     Exosphere is the anchor. Space is depth/dark surfaces.
     Figma style name: Blue Violet (#5C4DB3 — confirmed exact on the homepage board). */
  --m-purple: #5C4DB3;        /* Exosphere · Blue Violet — primary brand, accent, "AI" highlight */
  --m-purple-mid: #6E5DC4;    /* hover step between Exosphere and Space */
  --m-purple-deep: #352155;   /* Space — depth, dark surfaces (now usable as a background) */

  /* ── Lavender family ──
     Figma style name: Moon Raker (two tints — deeper #C9BDF0, soft #EFEAFA). */
  --m-lavender: #E2D7FF;      /* soft fill */
  --m-lavender-soft: #EFEAFA; /* Haze · Moon Raker (soft) — tinted background; the surface-lav section wash */
  --m-lavender-mid: #C9BDF0;  /* Horizon · Moon Raker (deeper) — soft accent, borders against lavender */

  /* ── Ink & neutrals ── */
  --m-black: #000000;         /* Black — true black; logo lockups & maximum-contrast text only */
  --m-ink: #1A1A1A;           /* Deep ink · Cod Gray — default text, primary button bg */
  --m-muted: #5C5C5C;         /* secondary text */
  --m-muted-2: #8A898F;       /* Mid grey · Jumbo — meta, captions, tertiary text */

  /* ── Surface system (white-led, subtly warm) ── */
  --m-paper: #FAFAF7;         /* Warm off-white — canvas, never pure white */
  --m-paper-2: #F2F3EE;       /* Soft grey · Cararra — alt panel, surface-soft section, inactive bar tracks */
  --m-white: #FFFFFF;         /* card surface only */
  --m-line: #E5E3DD;          /* Line — hairlines, dividers */
  --m-line-2: #D7D3CA;        /* stronger hairlines */

  /* ── Functional accents ── */
  --m-orange: #FF7E47;        /* Sunrise — "high" severity / UI alerts AND the homepage primary marketing CTA (.m-btn--orange) */
  --m-success: #2D7A4A;       /* positive states */
  --m-critical: #C42525;      /* errors, critical risk */
  --m-coral: #FF5E4E;         /* data-viz "critical" severity bar */
  --m-peri: #7188FF;          /* periwinkle — Financial bar (data-viz) */
  --m-peri-deep: #6169E5;
  --m-pink: #FF9090;

  /* ── Type — Clash Grotesk (display) + Inter (body) + JetBrains Mono (data) ── */
  --m-display: 'Clash Grotesk', 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; /* @kind font */
  --m-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* @kind font */
  --m-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', 'Roboto Mono', monospace; /* @kind font */ /* tabular test-data, code, dense numeric product UI only; never display, never eyebrows */

  /* Type ramp */
  --t-display-xl: 112px;
  --t-display-l: 72px;
  --t-display-m: 56px;
  --t-h1: 44px;
  --t-h2: 32px;
  --t-h3: 22px;
  --t-h4: 17px;
  --t-body: 15px;
  --t-small: 13px;
  --t-micro: 11px;

  /* ── Spacing (4-base) ── */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* ── Radii ── */
  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-pill: 999px;

  /* ── Elevation — restrained, purple-tinted ── */
  --el-1: 0 1px 0 rgba(26,26,26,.04), 0 1px 2px rgba(26,26,26,.04);
  --el-2: 0 1px 0 rgba(26,26,26,.04), 0 8px 24px -12px rgba(26,26,26,.12);
  --el-3: 0 1px 0 rgba(26,26,26,.04), 0 24px 48px -20px rgba(53,33,85,.18);
}

/* ── Base reset, scoped to .m-root so nothing leaks ── */
.m-root, .m-root * { box-sizing: border-box; }
.m-root {
  font-family: var(--m-sans);
  color: var(--m-ink);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.m-root h1, .m-root h2, .m-root h3, .m-root h4, .m-root p { margin: 0; }
.m-root a { color: inherit; text-decoration: none; }
.m-root button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ── Semantic display class — Clash Grotesk, tight tracking ── */
.m-display {
  font-family: var(--m-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.0;
}

/* Headline scale (semantic) — Clash Grotesk, no serif, tighter tracking */
.h-display-xl { font-family: var(--m-display); font-weight: 500; font-size: 156px; line-height: 0.95; letter-spacing: -0.03em;  text-wrap: balance; }
.h-display-l  { font-family: var(--m-display); font-weight: 500; font-size: 96px;  line-height: 1.0;  letter-spacing: -0.03em;  text-wrap: balance; }
.h-display-m  { font-family: var(--m-display); font-weight: 500; font-size: 72px;  line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; }
.h1 { font-family: var(--m-display); font-weight: 500; font-size: 56px; line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; }
.h2 { font-family: var(--m-display); font-weight: 500; font-size: 44px; line-height: 1.1;  letter-spacing: -0.02em;  text-wrap: balance; }
.h3 { font-family: var(--m-display); font-weight: 500; font-size: 32px; line-height: 1.15; letter-spacing: -0.015em; }
.h4 { font-family: var(--m-display); font-weight: 500; font-size: 22px; line-height: 1.3;  letter-spacing: -0.01em; }
.body-l { font-family: var(--m-sans); font-weight: 300; font-size: 22px; line-height: 1.5; text-wrap: pretty; }
.body   { font-family: var(--m-sans); font-size: 15px; line-height: 1.6; text-wrap: pretty; }
.small  { font-family: var(--m-sans); font-size: 13px; line-height: 1.5; }

/* Mono — JetBrains Mono. Product-UI role ONLY: tabular test-data values
   (account/card/sort-code numbers), code, and dense numeric tables. Tabular
   figures + slightly open tracking. Never for display copy or eyebrows. */
.mono, .m-mono {
  font-family: var(--m-mono);
  font-feature-settings: 'tnum' 1, 'zero' 1;
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: 0;
}
.m-data { font-family: var(--m-mono); font-size: 13px; line-height: 1.5; font-variant-numeric: tabular-nums slashed-zero; }

/* The "AI" / brand highlight — color only (no italic; the refresh drops serif italics) */
.ai-purple { color: var(--m-purple); }

/* ── Buttons ── */
.m-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  border-radius: 8px;
  font-family: var(--m-sans);
  font-size: var(--t-body);
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
  white-space: nowrap;
  border: 1px solid transparent;
}
.m-btn:active { transform: translateY(0.5px); }
.m-btn--primary { background: var(--m-ink); color: var(--m-paper); }
.m-btn--primary:hover { background: var(--m-purple); color: var(--m-white); }
.m-btn--purple { background: var(--m-purple); color: var(--m-white); }
.m-btn--purple:hover { background: var(--m-purple-mid); color: var(--m-white); }
.m-btn--ghost { background: transparent; color: var(--m-ink); border-color: var(--m-line-2); }
.m-btn--ghost:hover { background: var(--m-paper-2); border-color: var(--m-ink); color: var(--m-ink); }
.m-btn--lavender { background: var(--m-lavender); color: var(--m-purple-deep); }
.m-btn--lavender:hover { background: var(--m-lavender-mid); color: var(--m-purple-deep); }
/* Orange — the homepage hero primary CTA ("Book a demo"). Sunrise on paper, ink on hover. */
.m-btn--orange { background: var(--m-orange); color: var(--m-white); }
.m-btn--orange:hover { background: var(--m-ink); color: var(--m-paper); }
.m-btn--lg { padding: 18px 36px; font-size: 16px; border-radius: 10px; gap: 12px; }
.m-btn--sm { padding: 8px 18px; font-size: var(--t-small); }

/* ── Inputs ── */
.m-input {
  font-family: var(--m-sans);
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-2);
  border: 1px solid var(--m-line-2);
  background: var(--m-white);
  color: var(--m-ink);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.m-input::placeholder { color: var(--m-muted-2); }
.m-input:focus { border-color: var(--m-purple); box-shadow: 0 0 0 3px rgba(92,77,179,.15); }

/* ── Card ── */
.m-card {
  background: var(--m-white);
  border: 1px solid var(--m-line);
  border-radius: var(--r-3);
}

/* ── Link ── */
.m-link {
  color: var(--m-ink);
  border-bottom: 1px solid var(--m-line-2);
  padding-bottom: 1px;
  transition: border-color .12s, color .12s;
}
.m-link:hover { border-color: var(--m-ink); }
.m-link--purple { color: var(--m-purple); border-bottom-color: rgba(92,77,179,.35); }
.m-link--purple:hover { border-bottom-color: var(--m-purple); }

/* ── Pills / tags (Inter, sentence case) ── */
.m-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-family: var(--m-sans);
  font-size: var(--t-small);
  border: 1px solid var(--m-line);
  background: var(--m-paper-2);
  color: var(--m-muted);
}
.m-tag--ink { background: var(--m-ink); color: var(--m-paper); border-color: var(--m-ink); }
.m-tag--purple { background: var(--m-lavender); color: var(--m-purple-deep); border-color: transparent; }
.m-tag--coral { background: rgba(196,37,37,.10); color: var(--m-critical); border-color: transparent; }
.m-tag--orange { background: rgba(255,126,71,.14); color: #B0481C; border-color: transparent; }
.m-tag--peri { background: rgba(113,136,255,.14); color: #3D4DC2; border-color: transparent; }

/* ── Severity dots ── */
.m-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.m-dot--crit { background: var(--m-coral); }
.m-dot--high { background: var(--m-orange); }
.m-dot--med  { background: var(--m-peri); }
.m-dot--low  { background: var(--m-lavender-mid); }

/* Pulse */
.m-pulse { position: relative; }
.m-pulse::after {
  content: ''; position: absolute; inset: -3px;
  border-radius: 50%; border: 1.5px solid currentColor;
  opacity: .6; animation: m-pulse 1.6s ease-out infinite;
}
@keyframes m-pulse {
  0%   { transform: scale(.6); opacity: .8; }
  100% { transform: scale(2);  opacity: 0; }
}

/* Hairline divider */
.m-hr { height: 1px; background: var(--m-line); border: 0; }

/* Container */
.m-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.m-container--wide { max-width: 1320px; }

/* Eyebrow — DEPRECATED. Existing product.jsx components reference this for tabular-numeric labels in dense product UI only.
   New work should use sentence-case body text instead. Marketing/site code must NOT use eyebrows. */
.m-eyebrow {
  font-family: var(--m-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--m-muted);
}

/* Logo helper */
.m-logo { display: inline-flex; align-items: center; color: var(--m-ink); }
.m-logo svg { display: block; }