/* =========================================================
   NexaAI — Design Tokens
   A control-panel aesthetic for an AI SaaS: graphite surfaces,
   a signal-amber accent (not the default AI purple), and a
   cool teal for data. Sharper radii than the generic soft-SaaS
   card kit — this should feel like an instrument panel, not a
   brochure.
   ========================================================= */

:root {
  /* ---- Brand ---- */
  --brand-amber: #ff7a33;
  --brand-amber-ink: #1a0f06;
  --brand-teal: #2fd6c0;
  --brand-navy: #0e1116;

  /* ---- Light theme (default) ---- */
  --bg: #f6f6f4;
  --surface: #ffffff;
  --surface-2: #f0f1ee;
  --surface-raised: #ffffff;
  --border: #e2e3df;
  --border-strong: #cfd1cb;
  --text: #14161a;
  --text-muted: #5c616b;
  --text-faint: #8a8f98;
  --link: #b85a1f;

  --primary: var(--brand-amber);
  --primary-ink: #ffffff;
  --primary-soft: #fff0e6;
  --primary-soft-ink: #a8471a;

  --secondary: var(--brand-teal);
  --secondary-soft: #e5faf7;

  --success: #1f9d63;
  --success-soft: #e6f7ee;
  --warning: #b8790a;
  --warning-soft: #fff5e0;
  --danger: #d63c56;
  --danger-soft: #fdeaee;
  --info: #2f6fd6;
  --info-soft: #eaf1fd;

  --shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.06);
  --shadow-md: 0 4px 16px rgba(20, 22, 26, 0.08);
  --shadow-lg: 0 12px 32px rgba(20, 22, 26, 0.12);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --sidebar-width: 260px;
  --sidebar-width-collapsed: 76px;
  --header-height: 68px;

  --font-display: "Outfit", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ---- Dark theme ---- */
[data-theme="dark"] {
  --bg: #0e1116;
  --surface: #161a22;
  --surface-2: #1c212b;
  --surface-raised: #1c212b;
  --border: #2a2f3a;
  --border-strong: #3a4150;
  --text: #edeef1;
  --text-muted: #a4a9b3;
  --text-faint: #767c88;
  --link: #ffb27a;

  --primary-soft: #2c1a10;
  --primary-soft-ink: #ffb27a;

  --secondary-soft: #12312d;

  --success-soft: #103524;
  --warning-soft: #3a2a0c;
  --danger-soft: #3a1620;
  --info-soft: #142238;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
}

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