/*
 * Agentic Data Mining — design system
 * =====================================
 * Self-hosted type + design tokens shared across the marketing site
 * (index/catalog/sectors), the per-dataset doc pages, the customer portal
 * (signup/account), and the downloadable MCP connection kit.
 *
 * Fonts are self-hosted (woff2, ../fonts/) — no external font requests,
 * so this stylesheet works under a strict CSP with no font-src exception
 * and works fully offline. All three families are SIL Open Font License
 * 1.1 (license text: ../fonts/LICENSES/OFL-*.txt):
 *   - Manrope        — geometric sans (display/headings), by Mikhail
 *                       Sharanda. Premium, technology-forward cut; no italic
 *                       in the family (headings never request one).
 *   - Inter          — grotesque sans (body/UI/labels), by Rasmus
 *                       Andersson. Built for screen legibility at small sizes.
 *   - IBM Plex Mono   — code, identifiers, tabular data. Already used on
 *                       this site pre-redesign; kept for continuity.
 *
 * Palette evolves the existing brass/spruce/bone/card/strata names
 * (kept as CSS custom properties here so non-Tailwind consumers — the
 * kit, the dataset-doc template — can use `var(--brass)` etc. directly
 * without pulling in Tailwind).
 */

/* ---------- Type: self-hosted, variable where the source ships one ---------- */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/Manrope-Variable.woff2') format('woff2-variations'), url('../fonts/Manrope-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-Variable.woff2') format('woff2-variations'), url('../fonts/Inter-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-600.woff2') format('woff2');
}

/* ---------- Tokens ---------- */

:root {
  /* palette — same names/values as tailwind.config's `colors`, exposed as
     custom properties so CSS outside Tailwind's reach (the kit, plain
     <style> blocks) can reference the identical brand colors. */
  --ink: #0E1B15;          /* spruce  — base background */
  --panel: #142520;        /* card    — raised surface */
  --panel-deep: #1E3328;   /* strata-dark */
  --panel-mid: #27412F;    /* strata-mid  — table headers, chips */
  --brass: #D2A64F;
  --brass-bright: #E8C169;
  --paper: #EDE7DA;        /* bone — primary text on dark */
  --paper-dim: rgba(237, 231, 218, .7);
  --paper-faint: rgba(237, 231, 218, .5);
  --rule: rgba(237, 231, 218, .12);
  --rule-strong: rgba(237, 231, 218, .25);
  --positive: #4FAF7D;
  --caution: #D9822B;
  --negative: #C0564A;

  /* type */
  --font-display: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --tracking-wide: 0.18em;
  --tracking-wider: 0.32em;

  /* fluid type scale — clamp(min, preferred, max) */
  --step--1: clamp(.8rem, .78rem + .1vw, .875rem);
  --step-0: clamp(.95rem, .92rem + .15vw, 1rem);
  --step-1: clamp(1.125rem, 1.05rem + .35vw, 1.25rem);
  --step-2: clamp(1.4rem, 1.25rem + .7vw, 1.75rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.2vw, 2.5rem);
  --step-4: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  --step-5: clamp(3.2rem, 2.3rem + 3.2vw, 4.75rem);

  /* the aesthetic is square/editorial — corners are not rounded */
  --radius: 0;
}

/* ---------- Base ---------- */

body {
  font-family: var(--font-sans);
  background-color: var(--ink);
  color: var(--paper);
}
h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
}
code, pre, kbd, samp, .font-code, .font-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
::selection { background: var(--brass); color: var(--ink); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* ---------- Editorial components (usable with or without Tailwind) ---------- */

.kicker {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--paper-faint);
}

.hairline {
  height: 1px;
  background: var(--rule);
  border: none;
}

.ds-pill {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  border: 1px solid rgba(210, 166, 79, .5);
  padding: .18em .65em;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
  background: rgba(210, 166, 79, .06);
}

.ds-card {
  border: 1px solid var(--rule-strong);
  background: var(--panel);
}

.ds-stat {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--brass);
}

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .75em 1.25em;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .875rem;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.ds-btn-primary { background: var(--brass); color: var(--ink); }
.ds-btn-primary:hover { background: var(--brass-bright); }
.ds-btn-outline { border-color: rgba(210, 166, 79, .6); color: var(--brass); background: transparent; }
.ds-btn-outline:hover { border-color: var(--brass); background: rgba(210, 166, 79, .1); }
.ds-btn-ghost { border-color: var(--rule-strong); color: var(--paper); background: transparent; }
.ds-btn-ghost:hover { border-color: var(--paper-faint); }

.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  border: 1px solid var(--rule-strong);
}
.ds-table th {
  text-align: left;
  padding: .75em 1em;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--paper-faint);
  background: var(--panel-mid);
}
.ds-table td {
  padding: .75em 1em;
  border-top: 1px solid var(--rule);
  background: var(--panel);
}

.ds-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-2);
  line-height: 1.35;
}

.ds-code-panel {
  border: 1px solid var(--rule-strong);
  background: var(--panel);
}
.ds-code-panel > .ds-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--rule);
  padding: .6em 1.1em;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--paper-faint);
}
.ds-code-panel pre {
  margin: 0;
  overflow-x: auto;
  padding: 1.1em 1.1em;
  font-size: 13px;
  line-height: 1.7;
  color: var(--paper-dim);
}

.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 9999px; animation: ds-status-blink 1.8s ease-in-out infinite; }
.dot-green { background: var(--positive); box-shadow: 0 0 6px rgba(79, 175, 125, .6); }
.dot-orange { background: var(--caution); box-shadow: 0 0 6px rgba(217, 130, 43, .6); }
.dot-red { background: var(--negative); box-shadow: 0 0 6px rgba(192, 86, 74, .6); }
@keyframes ds-status-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .status-dot { animation: none; } }