/* Product UI variables and base styles */

/* Font definitions */
:root {
  --font-geist-sans: 'Geist Sans', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-geist-mono: 'Geist Mono', ui-monospace, monospace;
}

/* Reset and base styles */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  --canvas: #F4F4F5;
  --surface: #FAFAFA;
  --surface2: #F1F1F3;
  --hover: #E8E8EA;
  --line: #E4E4E7;
  --line2: #D4D4D8;
  --ink: #09090B;
  --muted: #71717A;
  --faint: #A1A1AA;
  --rail: #52525B;
  --link: #2540CB;
  --ok: #1E3222;
  --lz-green-bg: rgba(30, 50, 34, 0.1);
  --lz-green-fg: #1E3222;

  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-geist-sans);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

body.dark {
  --canvas: #0B0B0B;
  --surface: #161617;
  --surface2: #1C1C1E;
  --hover: #26262A;
  --line: #26262A;
  --line2: #37373C;
  --ink: #FAFAFA;
  --muted: #A1A1AA;
  --faint: #6E6E72;
  --rail: #A1A1AA;
  --link: #46A0E9;
  --ok: #8FBF9A;
  --lz-green-bg: rgba(143, 191, 154, 0.16);
  --lz-green-fg: #8FBF9A;
  background: #0B0B0B;
}

/* Link styles */
a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  color: var(--ink);
}

/* Scrollbar styles */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 120, 130, 0.45) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(120, 120, 130, 0.4);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 8px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(120, 120, 130, 0.65);
}

/* Brand surface variables (namespaced to prevent collision with product-UI vars) */
.caelon-brand-surface {
  --bg: #FFFFFF;
  --ink: #0B0B0B;
  --line: #DFDFDF;
  --muted: #6E6E6E;
  --body: #282A2A;
  --code-bg: #0B0B0B;
  --code-fg: #FFFFFF;
  --link: #2540CB;
}

body.dark .caelon-brand-surface {
  --bg: #0B0B0B;
  --ink: #FFFFFF;
  --line: #2E2E2C;
  --muted: #A9A49A;
  --body: #D3CBBA;
  --code-bg: #282A2A;
  --code-fg: #FFFFFF;
  --link: #46A0E9;
}

/* Logo swap */
.logo-dark {
  display: none !important;
}

body.dark .logo-light {
  display: none !important;
}

body.dark .logo-dark {
  display: block !important;
}

@keyframes livePulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}