/* ==========================================================================
   Nexus AI / ScrollX UI Design Tokens & Theme System for Key Solutions
   ========================================================================== */

:root {
  --radius: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;

  /* Light Theme Defaults */
  --background: #fafafa;
  --foreground: #09090b;
  --card: #ffffff;
  --card-foreground: #09090b;
  --popover: #ffffff;
  --popover-foreground: #09090b;
  --primary: #09090b;
  --primary-foreground: #fafafa;
  --secondary: #f4f4f5;
  --secondary-foreground: #09090b;
  --muted: #f4f4f5;
  --muted-foreground: #64748b;
  --accent: #f4f4f5;
  --accent-foreground: #09090b;
  --destructive: #ef4444;
  --border: #e4e4e7;
  --input: #e4e4e7;
  --ring: #09090b;

  /* Signal Accents */
  --color-emerald-400: #00d294;
  --color-emerald-500: #00bb7f;
  --color-blue-400: #54a2ff;
  --color-blue-500: #3080ff;
  --color-yellow-400: #fac800;
  --color-yellow-500: #edb200;
  --color-violet-400: #a685ff;
  --color-violet-500: #8d54ff;
  --color-orange-500: #fe6e00;

  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Dark Theme (Default SaaS look) */
.dark, html:not(.light) {
  --background: #010101;
  --foreground: #f8f8f8;
  --card: #080808;
  --card-foreground: #f8f8f8;
  --popover: #080808;
  --popover-foreground: #f8f8f8;
  --primary: #f8f8f8;
  --primary-foreground: #020202;
  --secondary: #111111;
  --secondary-foreground: #f8f8f8;
  --muted: #111111;
  --muted-foreground: #888888;
  --accent: #141414;
  --accent-foreground: #f8f8f8;
  --destructive: #ff6568;
  --border: #181818;
  --input: #181818;
  --ring: #717171;
}

/* Specific theme utility classes */
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-inter);
  margin: 0;
  padding: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
  border-color: var(--border);
}

::selection {
  background-color: var(--foreground);
  color: var(--background);
}