/* Design tokens — adapted from the Groxo brand system (sec. 14: swap the name, keep the system).
   Light theme, plus the .theme-ink band; everything downstream styles through the semantic vars (--bg, --fg, --surface…). */
:root {
  --color-paper: #fafaf7;
  --color-ink: #0a0f0c;
  --color-ink-2: #1a201c;
  --color-ink-3: #3a423d;
  --color-muted: #6b736d;
  --color-line: #e6e7e4;
  --color-line-soft: #f1f2ee;
  --color-white: #fff;
  --color-green-50: #e7fbef;
  --color-green-500: #00a653;
  --color-green-700: #006b33;

  /* Service accents — scoped to their own surface, never page chrome. */
  --color-agents: #6e56f7;
  --color-rag: #2b6fff;
  --color-models: #d9541b;
  --color-vision: #0bb4c4;
  --color-mlops: #9446ff;
  --color-apps: #ff3d7f;
  --color-consulting: #470012;   /* Groxo "ads" maroon */
  --color-integration: #006b33;  /* green-700 */

  --color-danger: #e6354b;
  --color-warning: #edb700;
  --color-info: #2b6fff;

  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --ease-brand: cubic-bezier(0.22, 1, 0.36, 1);
  --container: 1200px;
  --gutter: 24px;

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Semantic */
  --bg: var(--color-paper);
  --fg: var(--color-ink);
  --fg-muted: var(--color-muted);
  --line-color: var(--color-line);
  --line-color-soft: var(--color-line-soft);
  --surface: var(--color-white);
  --featured: rgba(231, 251, 239, 0.3);
  --mock-shadow: 0 30px 80px -30px rgba(10, 15, 12, 0.35);
}

@media (min-width: 1024px) {
  :root { --gutter: 40px; }
}

/* Ink surface: the brand's dark values, scoped to one band (e.g. a "why us" section). */
.theme-ink {
  --bg: var(--color-ink);
  --fg: var(--color-paper);
  --fg-muted: #8a928e;
  --line-color: var(--color-ink-2);
  --line-color-soft: var(--color-ink-3);
  --surface: var(--color-ink-2);
  --featured: rgba(0, 166, 83, 0.10);
  --mock-shadow: none;
  background: var(--bg);
  color: var(--fg);
}