/* Shared public-site foundations. Page layouts stay local; identity, surface,
   typography, canvas atmosphere, and interaction contracts live here. */
:root {
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Source Code Pro', ui-monospace, Menlo, Monaco, Consolas, monospace;

  --orange: #e94f29;
  --orange-hover: #d54a28;
  --orange-tint: rgba(233, 79, 41, 0.06);
  --orange-border: rgba(233, 79, 41, 0.32);
  /* Legacy public pages still use --primary for decorative brand accents.
     Interactive primary controls are normalized below to --action. */
  --primary: #e94f29;
  --action: #21ad8f;
  --action-hover: #1b9279;
  --teal: #21ad8f;

  --bg: #212121;
  --bg-deep: #1a1a1a;
  --bg-primary: #212121;
  --bg-card: #292929;
  --card: #292929;
  --panel: #292929;
  --bg-elevated: #303030;
  --bg-card-hover: #303030;
  --surface-elevated: #303030;
  --border: #454545;
  --border-mid: #454545;
  --border-subtle: rgba(255, 255, 255, 0.08);

  --ws-bg: #212121;
  --ws-card: #292929;
  --ws-border: rgba(69, 69, 69, 0.65);
  --ws-borderStrong: #454545;
  --ws-mutedBg: rgba(48, 48, 48, 0.58);
  --ws-primary: #e94f29;
  --ws-accent-teal: #21ad8f;

  --motion-fast: 120ms;
  --motion-base: 160ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --canvas-ambient: radial-gradient(900px 560px at 50% -80px, rgba(233, 79, 41, 0.06), transparent 72%), linear-gradient(180deg, #1a1a1a 0%, #212121 42%, #212121 100%);
}

html { background: #212121; }

body {
  background-color: #212121;
  background-image: var(--canvas-ambient);
  background-attachment: fixed;
  color-scheme: dark;
  font-family: var(--font-sans);
}

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

:where(button, .btn, .button, .pricing-btn, [role='button']) {
  transition-property: background-color, border-color, color, opacity, box-shadow, transform;
  transition-duration: var(--motion-base), var(--motion-base), var(--motion-base), var(--motion-base), var(--motion-base), var(--motion-fast);
  transition-timing-function: var(--ease-out);
}

:where(button, .btn, .button, .pricing-btn, [role='button']):active:not(:disabled):not([aria-disabled='true']) {
  transform: scale(0.97);
}

/* The public pages predate the brand/action token split and each carried its
   own orange CTA rule. Keep orange for identity; make actions consistently teal. */
.btn-primary,
.button-primary,
.pricing-btn-primary,
.nav-cta,
.cta-primary {
  background-color: var(--action) !important;
  border-color: var(--action) !important;
  color: #fff !important;
  box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover,
  .button-primary:hover,
  .pricing-btn-primary:hover,
  .nav-cta:hover,
  .cta-primary:hover {
    background-color: var(--action-hover) !important;
    border-color: var(--action-hover) !important;
    box-shadow: 0 6px 20px rgba(33, 173, 143, 0.18) !important;
  }
}

@media not (hover: hover) {
  .btn-primary:hover,
  .button-primary:hover,
  .pricing-btn-primary:hover,
  .nav-cta:hover,
  .cta-primary:hover {
    background-color: var(--action) !important;
    border-color: var(--action) !important;
    box-shadow: none !important;
    transform: none !important;
  }
}

:where(button, .btn, [role='button'], a[href], input, textarea, select):focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}

:where(button:disabled, input:disabled, textarea:disabled, select:disabled, [aria-disabled='true']) {
  cursor: not-allowed;
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  :where(button, .btn, .button, .pricing-btn, [role='button']):active:not(:disabled):not([aria-disabled='true']) {
    transform: none;
  }
}