/* MDx Design System — Token Definitions (Vanilla CSS)
   Extracted from packages/shared-svelte/src/theme/tokens.css
   for consumption by vanilla HTML pages (Twin, landing, etc.).
   Source of truth: packages/shared-svelte/src/theme/tokens.css
   Generated: 2026-04-06 */

:root {
  /* Surface */
  --mdx-surface-base: #0a0a0b;
  --mdx-surface-raised: #111113;
  --mdx-surface-overlay: #1a1a1d;
  --mdx-surface-sunken: #070708;

  /* Text */
  --mdx-text-primary: #f0f0f2;
  --mdx-text-secondary: #a1a1aa;
  --mdx-text-muted: #71717a;
  --mdx-text-faint: #3a3a3e;

  /* Border */
  --mdx-border-subtle: rgba(255,255,255,0.06);
  --mdx-border-default: #252528;
  --mdx-border-strong: rgba(255,255,255,0.16);

  /* Accent */
  --mdx-accent-primary: #4285F4;
  --mdx-accent-primary-hover: #5a9cf6;
  --mdx-accent-success: #34d399;
  --mdx-accent-warning: #fbbf24;
  --mdx-accent-error: #fb7185;
  --mdx-accent-info: #22d3ee;
  --mdx-accent-purple: #a78bfa;

  /* Per-App Accents */
  --mdx-app-twin: #4285F4;
  --mdx-app-code: #34d399;
  --mdx-app-message: #22d3ee;
  --mdx-app-observatory: #fb7185;
  --mdx-app-strategy: #a78bfa;
  --mdx-app-focus: #22d3ee;
  --mdx-app-pages: #fbbf24;
  --mdx-app-forge: #4285F4;
  --mdx-app-triage: #34d399;
  --mdx-app-stella: #fb7185;
  --mdx-app-pulse: #a78bfa;

  /* Typography */
  --mdx-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mdx-font-display: 'Satoshi', 'DM Sans', sans-serif;
  --mdx-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Type Scale */
  --mdx-text-xs: 0.65rem;
  --mdx-text-sm: 0.75rem;
  --mdx-text-base: 0.8rem;
  --mdx-text-md: 0.9rem;
  --mdx-text-lg: 1.05rem;
  --mdx-text-xl: 1.4rem;
  --mdx-text-2xl: clamp(2rem, 4vw, 3rem);
  --mdx-text-3xl: clamp(2.5rem, 5vw, 4rem);

  /* Spacing (4px base) */
  --mdx-space-1: 4px;
  --mdx-space-2: 8px;
  --mdx-space-3: 12px;
  --mdx-space-4: 16px;
  --mdx-space-5: 20px;
  --mdx-space-6: 24px;
  --mdx-space-8: 32px;
  --mdx-space-10: 40px;
  --mdx-space-12: 48px;
  --mdx-space-16: 64px;
  --mdx-space-20: 80px;

  /* Font Weights */
  --mdx-weight-light: 300;
  --mdx-weight-normal: 400;
  --mdx-weight-medium: 500;
  --mdx-weight-semibold: 600;
  --mdx-weight-bold: 700;
  --mdx-weight-black: 800;

  /* Line Height */
  --mdx-leading-tight: 1.1;
  --mdx-leading-snug: 1.25;
  --mdx-leading-normal: 1.5;
  --mdx-leading-relaxed: 1.7;

  /* Radius */
  --mdx-radius-sm: 4px;
  --mdx-radius-md: 6px;
  --mdx-radius-lg: 8px;
  --mdx-radius-xl: 12px;
  --mdx-radius-full: 9999px;

  /* Transition */
  --mdx-ease-out: cubic-bezier(.16,1,.3,1);
  --mdx-transition-fast: 150ms ease;
  --mdx-transition-normal: 200ms ease;
  --mdx-transition-slow: 400ms cubic-bezier(.16,1,.3,1);

  /* Rail */
  --mdx-rail-width: 56px;
}

/* Light mode (presentation mode) */
html[data-theme="light"] {
  --mdx-surface-base: #fafafa;
  --mdx-surface-raised: #ffffff;
  --mdx-surface-overlay: #f4f4f5;
  --mdx-surface-sunken: #f0f0f2;
  --mdx-text-primary: #18181b;
  --mdx-text-secondary: #52525b;
  --mdx-text-muted: #a1a1aa;
  --mdx-text-faint: #d4d4d8;
  --mdx-border-subtle: rgba(0,0,0,0.06);
  --mdx-border-default: #e4e4e7;
  --mdx-border-strong: rgba(0,0,0,0.16);
}