/*
 * Shared design tokens for demos under /demo-assets/.
 *
 * The multi-file demos reference these vars via ../../colors_and_type.css,
 * which resolves to this file at the web root. Each demo also defines its
 * own palette (e.g. --bp, --bs, --acc) inline in its own index.html — those
 * intentionally override the values below.
 */

:root {
  /* ---- Type ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, 'SF Mono', Menlo,
    Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --font-display: 'Inter', var(--font-sans);

  /* ---- Foreground tones (light-on-dark default) ---- */
  --fg:   #f8fafc;
  --fg-1: #e2e8f0;
  --fg-2: #94a3b8;
  --fg-3: #64748b;

  /* ---- Accents / status ---- */
  --accent: #38bdf8;

  /* ---- Gradients ---- */
  --gradient-page: radial-gradient(circle at 20% -10%, #1e1b4b 0%, #0b1224 45%, #020617 100%);
  --gradient-kernel: linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%);

  /* ---- Elevation ---- */
  --shadow-card:   0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-button: 0 4px 12px rgba(0, 0, 0, 0.30);
}