/* ============================================
   WA Robots — Design Tokens
   Single source of truth for all visual values.
   All colors use oklch for perceptual uniformity.
   ============================================ */

:root {
  /* ---- Radius (large, soft, modern) ---- */
  --wa-radius-sm: 0.5rem;
  --wa-radius-md: 0.75rem;
  --wa-radius-lg: 1rem;
  --wa-radius-xl: 1.25rem;
  --wa-radius-2xl: 1.5rem;
  --wa-radius-full: 9999px;

  /* ---- Spacing (supplements Tailwind) ---- */
  --wa-sidebar-width: 250px;
  --wa-sidebar-collapsed: 64px;
  --wa-topbar-height: 64px;
  --wa-content-max: 1400px;

  /* ---- Shadows ---- */
  --wa-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --wa-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --wa-shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --wa-shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04);
  --wa-shadow-xl: 0 20px 25px rgba(0,0,0,0.10), 0 8px 10px rgba(0,0,0,0.04);

  /* ---- Motion ---- */
  --wa-duration-fast: 100ms;
  --wa-duration-normal: 200ms;
  --wa-duration-slow: 300ms;
  --wa-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --wa-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --wa-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --wa-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ---- AI Accent ---- */
  --wa-ai-from: #818cf8;
  --wa-ai-to: #22d3ee;
  --wa-ai-gradient: linear-gradient(135deg, var(--wa-ai-from), var(--wa-ai-to));

  /* ---- Neutral Accent (UI chrome — very subtle, not a separate color) ---- */
  --wa-neutral: #374151;
  --wa-neutral-fg: #ffffff;
  --wa-neutral-muted: rgba(0, 0, 0, 0.04);

  /* ---- Typography ---- */
  --wa-font-heading: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --wa-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --wa-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ---- Z-index scale ---- */
  --wa-z-dropdown: 50;
  --wa-z-sticky: 100;
  --wa-z-modal-backdrop: 200;
  --wa-z-modal: 210;
  --wa-z-popover: 300;
  --wa-z-toast: 400;
  --wa-z-tooltip: 500;
}

/* ============================================
   Light Theme (default)
   Neutral surfaces, green + blue accents matching dark mode
   ============================================ */
:root, [data-theme="light"] {
  --wa-bg: #f4f5f6;
  --wa-bg-secondary: #eaecee;
  --wa-fg: #111318;
  --wa-fg-muted: #5b6068;
  --wa-fg-subtle: #8a8f96;

  /* Card / Surface */
  --wa-card: #ffffff;
  --wa-card-fg: #111318;
  --wa-card-border: #dfe1e4;

  /* Primary — Mint-green matching dark mode #4ad4a3 */
  --wa-primary: #18a06e;
  --wa-primary-fg: #ffffff;
  --wa-primary-hover: #148f60;
  --wa-primary-muted: #e6f7f0;

  /* Secondary */
  --wa-secondary: #eef0f2;
  --wa-secondary-fg: #111318;
  --wa-secondary-hover: #e3e6e9;

  /* Accent */
  --wa-accent: #18a06e;
  --wa-accent-fg: #ffffff;

  /* Muted */
  --wa-muted: #eef0f2;
  --wa-muted-fg: #5b6068;

  /* Destructive */
  --wa-destructive: #ef4444;
  --wa-destructive-fg: #ffffff;
  --wa-destructive-muted: #fef2f2;

  /* Success */
  --wa-success: #18a06e;
  --wa-success-fg: #ffffff;
  --wa-success-muted: #e6f7f0;

  /* Warning */
  --wa-warning: #f59e0b;
  --wa-warning-fg: #ffffff;
  --wa-warning-muted: #fef9c3;

  /* Info */
  --wa-info: #3280fa;
  --wa-info-fg: #ffffff;
  --wa-info-muted: #e0ecfe;

  /* Border / Input / Ring */
  --wa-border: #dfe1e4;
  --wa-input: #d6d9dc;
  --wa-ring: #18a06e;

  /* Sidebar */
  --wa-sidebar-bg: #f0f1f3;
  --wa-sidebar-fg: #111318;
  --wa-sidebar-muted: #5b6068;
  --wa-sidebar-border: #dfe1e4;
  --wa-sidebar-accent: #dde0e3;
  --wa-sidebar-accent-fg: #111318;

  /* Popover */
  --wa-popover: #ffffff;
  --wa-popover-fg: #111318;

  /* Specific */
  --wa-bubble-inbound: #eef0f2;
  --wa-bubble-outbound: #e6f7f0;
  --wa-bubble-note: #fef9c3;
}

/* ============================================
   Dark Theme — Deep green-gray with black cards
   Reference: muted green-gray bg, pure black cards,
   green (#4ad4a3) + blue (#3280fa) accents
   ============================================ */
[data-theme="dark"] {
  --wa-bg: #1a1e1f;
  --wa-bg-secondary: #141718;
  --wa-fg: #fefefe;
  --wa-fg-muted: #b2b7b8;
  --wa-fg-subtle: #6e7475;

  --wa-card: #000000;
  --wa-card-fg: #fefefe;
  --wa-card-border: #2a2f30;

  --wa-primary: #4ad4a3;
  --wa-primary-fg: #000000;
  --wa-primary-hover: #3bc492;
  --wa-primary-muted: rgba(74,212,163,0.20);

  --wa-secondary: #1f2324;
  --wa-secondary-fg: #fefefe;
  --wa-secondary-hover: #282d2e;

  --wa-accent: #4ad4a3;
  --wa-accent-fg: #000000;

  --wa-muted: #1f2324;
  --wa-muted-fg: #b2b7b8;

  --wa-destructive: #f87171;
  --wa-destructive-fg: #ffffff;
  --wa-destructive-muted: rgba(248,113,113,0.22);

  --wa-success: #4ad4a3;
  --wa-success-fg: #000000;
  --wa-success-muted: rgba(74,212,163,0.20);

  --wa-warning: #fbbf24;
  --wa-warning-fg: #000000;
  --wa-warning-muted: rgba(251,191,36,0.20);

  --wa-info: #3280fa;
  --wa-info-fg: #ffffff;
  --wa-info-muted: rgba(50,128,250,0.22);

  --wa-border: #2a2f30;
  --wa-input: #2a2f30;
  --wa-ring: #4ad4a3;

  --wa-sidebar-bg: #141718;
  --wa-sidebar-fg: #fefefe;
  --wa-sidebar-muted: #6e7475;
  --wa-sidebar-border: #232829;
  --wa-sidebar-accent: #1f2324;
  --wa-sidebar-accent-fg: #fefefe;

  --wa-popover: #000000;
  --wa-popover-fg: #fefefe;

  --wa-bubble-inbound: #1f2324;
  --wa-bubble-outbound: rgba(74,212,163,0.10);
  --wa-bubble-note: rgba(251,191,36,0.08);

  --wa-neutral: #d1d5db;
  --wa-neutral-fg: #000000;
  --wa-neutral-muted: rgba(255, 255, 255, 0.06);

  --wa-shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --wa-shadow-sm: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --wa-shadow-md: 0 4px 6px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.4);
  --wa-shadow-lg: 0 10px 15px rgba(0,0,0,0.6), 0 4px 6px rgba(0,0,0,0.4);
  --wa-shadow-xl: 0 20px 25px rgba(0,0,0,0.6), 0 8px 10px rgba(0,0,0,0.4);
}

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --wa-duration-fast: 0ms;
    --wa-duration-normal: 0ms;
    --wa-duration-slow: 0ms;
  }
}