/**
 * sentience-tokens.css — Shared design tokens for sentience.social
 * Include in any app: <link rel="stylesheet" href="https://dashboard.sentience.social/cdn/sentience-tokens.css">
 * NeonVolt Design System — cyberpunk terminal aesthetic
 */

:root {
  /* ─── Shell ─────────────────────────────────────────── */
  --s-shell-height: 48px;

  /* ─── Canvas & Surfaces ─────────────────────────────── */
  --s-canvas: #000000;
  --s-canvas-raised: #0F0F1A;
  --s-canvas-sunken: #050510;
  --s-surface-1: #0F0F1A;
  --s-surface-2: #141420;
  --s-surface-3: #1A1A2E;
  --s-surface-input: #0C0C14;

  /* ─── Text ──────────────────────────────────────────── */
  --s-text-primary: #C8CCD4;
  --s-text-secondary: #6A7080;
  --s-text-tertiary: #3A3F4A;
  --s-text-inverse: #000000;
  --s-text-link: #00D4FF;

  /* ─── Domain Colors ─────────────────────────────────── */
  --s-agents: #00D4FF;
  --s-intelligence: #FF2D7B;
  --s-orchestration: #B026FF;
  --s-delegations: #FFD700;
  --s-infrastructure: #39FF14;
  --s-debriefs: #FF6B00;

  /* ─── Semantic ──────────────────────────────────────── */
  --s-success: #39FF14;
  --s-warning: #FFD700;
  --s-error: #FF2D7B;
  --s-info: #00D4FF;

  /* ─── Per-App Accent (override in each app) ─────────── */
  --s-accent: #00D4FF;
  --s-accent-dim: rgba(0, 212, 255, 0.15);
  --s-accent-glow: rgba(0, 212, 255, 0.30);

  /* ─── Typography ────────────────────────────────────── */
  --s-font-mono: "IBM Plex Mono", "JetBrains Mono", "Fira Code", monospace;
  --s-font-body: "Inter", "IBM Plex Mono", system-ui, sans-serif;
  --s-font-display: "Playfair Display", "IBM Plex Mono", serif;

  --s-text-xs: 0.6875rem;
  --s-text-sm: 0.8125rem;
  --s-text-base: 0.875rem;
  --s-text-lg: 1rem;
  --s-text-xl: 1.125rem;
  --s-text-2xl: 1.25rem;
  --s-text-3xl: 1.5rem;
  --s-text-4xl: 1.75rem;

  /* ─── Spacing (4px base) ────────────────────────────── */
  --s-space-xs: 4px;
  --s-space-sm: 8px;
  --s-space-md: 12px;
  --s-space-lg: 16px;
  --s-space-xl: 24px;
  --s-space-2xl: 32px;
  --s-space-3xl: 48px;

  /* ─── Radius ────────────────────────────────────────── */
  --s-radius-sm: 4px;
  --s-radius-md: 4px;
  --s-radius-lg: 4px;

  /* ─── Borders ───────────────────────────────────────── */
  --s-border: rgba(0, 212, 255, 0.15);
  --s-border-hover: rgba(0, 212, 255, 0.35);
  --s-border-focus: #00D4FF;
  --s-border-subtle: rgba(0, 212, 255, 0.08);

  /* ─── Shadows (neon glow) ───────────────────────────── */
  --s-shadow-sm: 0 0 5px rgba(0, 212, 255, 0.08);
  --s-shadow-md: 0 0 15px rgba(0, 212, 255, 0.1);
  --s-shadow-lg: 0 0 25px rgba(0, 212, 255, 0.15);
  --s-shadow-xl: 0 0 40px rgba(0, 212, 255, 0.2);

  /* ─── Motion ────────────────────────────────────────── */
  --s-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --s-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --s-dur-fast: 150ms;
  --s-dur-normal: 200ms;
  --s-dur-slow: 350ms;

  /* ─── Gradients ─────────────────────────────────────── */
  --s-grad-brand: linear-gradient(135deg, #00D4FF 0%, #B026FF 50%, #FF2D7B 100%);
  --s-grad-aurora: linear-gradient(135deg, #00D4FF 0%, #B026FF 33%, #FF2D7B 66%, #39FF14 100%);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --s-dur-fast: 0ms;
    --s-dur-normal: 0ms;
    --s-dur-slow: 0ms;
  }
}