/* ============================================================
   SiteBot — shared stylesheet
   Loaded by: index.html, faq.html, contactus.html
   ============================================================ */

/* ----------------------------------------------------------
   Light theme custom properties
   ---------------------------------------------------------- */
:root {
  --color-bg:        white;
  --color-surface:   oklch(0.985 0.002 247);     /* slate-50 */
  --color-surface2:  oklch(0.977 0.013 264.5);   /* sky-50 */
  --color-surface3:  oklch(0.951 0.026 264.5);   /* sky-100 */

  --color-border:    oklch(0.869 0.022 252);     /* slate-200 */
  --color-border2:   oklch(0.83 0.03 252);       /* slate-300 */

  --color-text:      oklch(0.279 0.041 252);     /* slate-800 */
  --color-text2:     oklch(0.379 0.042 252);     /* slate-700 */
  --color-muted:     oklch(0.554 0.046 252);     /* slate-500 */

  /* === New: Primary & Secondary === */
  --color-primary:       oklch(0.546 0.192 256);   /* sky-600 - Main brand color */
  --color-primary-dark:  oklch(0.453 0.175 256);   /* sky-700 - Hover / active */
  --color-primary-lt:    oklch(0.951 0.026 264.5); /* sky-100 - Light version */

  --color-secondary:       oklch(0.446 0.043 257);   /* slate-600 */
  --color-secondary-dark:  oklch(0.372 0.044 257);   /* slate-700 */
  --color-secondary-lt:    oklch(0.929 0.013 255);   /* slate-200 */

  /* Keep your accent if you still want it separate */
  --color-accent:        oklch(0.546 0.192 256);   /* same as primary */
  --color-accent-lt:     oklch(0.951 0.026 264.5);
  --color-accent-dark:   oklch(0.453 0.175 256);
}

/* ----------------------------------------------------------
   Typewriter cursor
   ---------------------------------------------------------- */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: #38bdf8;
  margin-left: 2px;
  vertical-align: text-bottom;
  border-radius: 1px;
  animation: blink 0.9s step-end infinite;
}

/* ----------------------------------------------------------
   Hero gradient background
   ---------------------------------------------------------- */
.hero-gradient {
  background: linear-gradient(135deg, #0e1b39ff 0%, #0c1a2e 40%, #133f61ff 70%, #0f172a 100%);
}

/* ----------------------------------------------------------
   Subtle animated orb behind hero
   ---------------------------------------------------------- */
@keyframes orb-pulse {
  0%, 100% { transform: scale(1) translate(-50%, -50%); opacity: 0.18; }
  50%       { transform: scale(1.12) translate(-50%, -50%); opacity: 0.28; }
}
.hero-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80vw;
  max-width: 900px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14,165,233,0.45) 0%, rgba(2,132,199,0.2) 50%, transparent 80%);
  pointer-events: none;
  animation: orb-pulse 6s ease-in-out infinite;
  transform-origin: top left;
}

/* ----------------------------------------------------------
   Prompt box focus ring
   ---------------------------------------------------------- */
.prompt-box:focus-within {
  box-shadow: 0 0 0 2px rgba(56,189,248,0.5);
}