@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Space+Grotesk:wght@400;500;700&display=swap');

/*
  Demo Intelligence — design tokens
  Company brand for demointelligence.ai. Import this first, then build on the
  role variables (--color-*, --text-*) rather than the raw hex.
*/

:root {
  /* ── Brand · navy ─────────────────────────────── */
  --navy: #0B1C2E;
  --navy-deep: #07131F;
  --navy-raised: #122A40;

  /* ── Brand · teal ─────────────────────────────── */
  --teal: #14C2A0;        /* accent on dark backgrounds */
  --teal-dark: #0E8E74;   /* teal text / links / mark on LIGHT (contrast) */
  --teal-tint: #DBF5EE;   /* light accent background, badges */

  /* ── Neutral ──────────────────────────────────── */
  --ink: #16242E;         /* body text on light */
  --muted: #5A6B73;       /* secondary text */
  --border: #E2E8E6;      /* hairlines, dividers */
  --surface: #F1F6F4;     /* light section background */
  --white: #FFFFFF;

  /* ── Semantic (product UI) ────────────────────── */
  --success: #1E9E6A;
  --warning: #E0922B;
  --error: #D2453B;

  /* ── Roles — prefer these in components ───────── */
  --color-bg: var(--white);
  --color-bg-alt: var(--surface);
  --color-bg-inverse: var(--navy);
  --color-text: var(--ink);
  --color-text-muted: var(--muted);
  --color-text-on-inverse: #FFFFFF;
  --color-accent: var(--teal);
  --color-accent-ink: var(--teal-dark);
  --color-border: var(--border);

  /* ── Type ─────────────────────────────────────── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', Menlo, monospace;
  --text-display: 44px;
  --text-h1: 32px;
  --text-h2: 22px;
  --text-h3: 18px;
  --text-body: 16px;
  --text-small: 13px;
  --weight-regular: 400;
  --weight-medium: 500;
  --leading-tight: 1.1;
  --leading-body: 1.55;

  /* ── Radius ───────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
}