/* OCC AI Soufler shared visual foundation.
   Local fonts only: no third-party font requests. */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --occ-font-sans: "Geist", "Segoe UI Variable", "Segoe UI", sans-serif;
  --occ-font-mono: "Geist Mono", "Cascadia Mono", "SFMono-Regular", monospace;

  --occ-bg: #090d12;
  --occ-surface: #111821;
  --occ-surface-raised: #17212c;
  --occ-surface-offset: #1d2936;
  --occ-border: rgba(185, 208, 228, 0.16);
  --occ-divider: rgba(185, 208, 228, 0.09);
  --occ-text: #f3f7fa;
  --occ-text-muted: #a8b6c4;
  --occ-text-faint: #91a1b0;

  --occ-accent: #42bdf5;
  --occ-accent-hover: #75d1fa;
  --occ-accent-active: #1f9fd8;
  --occ-accent-ink: #06131b;
  --occ-accent-soft: rgba(66, 189, 245, 0.12);
  --occ-accent-line: rgba(66, 189, 245, 0.38);
  --occ-success: #65c58b;
  --occ-warning: #efa85f;
  --occ-error: #ef7883;

  --occ-radius-sm: 8px;
  --occ-radius-md: 12px;
  --occ-radius-lg: 18px;
  --occ-radius-xl: 24px;
  --occ-radius-pill: 999px;
  --occ-shadow-sm: 0 12px 32px rgba(0, 0, 0, 0.2);
  --occ-shadow-md: 0 24px 64px rgba(0, 0, 0, 0.32);
  --occ-transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* One typographic voice across the public site and the cabinet. Native form
   controls do not reliably inherit a page font, so keep them on Geist too. */
html,
body {
  font-family: var(--occ-font-sans);
  font-optical-sizing: auto;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-variation-settings: normal;
}

code,
kbd,
samp,
pre {
  font-family: var(--occ-font-mono);
}

html[data-theme="dark"],
html:not([data-theme]) {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button,
a {
  touch-action: manipulation;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}