@tailwind base;
@tailwind components;
@tailwind utilities;

/* ============================================
   PREMIUM DESIGN SYSTEM - CSS VARIABLES
   ============================================ */
:root {
  /* ============================================================
     MORNING LIGHT (Brand Guide v2.0). Variable NAMES are kept so the
     ~hundreds of `var(--…)` call sites across views retone for free;
     only VALUES change. Light theme only — the `.dark {}` block was
     removed in the MIN-233 migration.
     ============================================================ */

  /* Night scale (legacy "navy" names → warm dark ink) */
  --navy-deep: #0E1E17;
  --navy-900: #141D18;
  --navy-800: #1B2620;                  /* ink */
  --navy-700: #2A352F;
  --navy-600: #3C4B43;

  /* Fern (legacy "lime" names → the accent that moved) */
  --lime-300: #8BD9B3;                  /* fern-bright */
  --lime-400: #2E9E6F;
  --lime-500: #15754E;                  /* fern */
  --lime-600: #11603F;                  /* fern-deep */
  --lime-glow: rgba(23, 126, 84, 0.16);

  /* Paper neutrals (60% of page) */
  --warm-50: #F2F6F3;
  --warm-100: #E7EEE9;
  --warm-200: #DCE6DF;
  --warm-300: #BBC9C0;

  /* Dawn (money) + semantic functional colors (kept) */
  --dawn:    #A35F0C;
  --dawn-deep: #834B0A;
  --dawn-bright: #F0B254;
  --success: #10b981;
  --coral:   #f97316;
  --amber:   #fbbf24;
  --accent:  #A35F0C;                   /* decorative accent → dawn */

  /* Legacy aliases */
  --warm-white: #F2F6F3;
  --warm-gray-50: #F2F6F3;

  /* Glass effects → subtle paper-over-white, hairline (no heavy blur dependency) */
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(27, 38, 32, 0.10);

  /* ----------------------------------------------------------------
     Surface ladder: canvas (paper) → panel → card (white). Cards read
     from a hairline `line` border, not shadow.
     ---------------------------------------------------------------- */
  --bg-canvas:    #ffffff;              /* all-white ground (D1, MIN-233 gap audit) — app diverges from mira-web's paper here */
  --bg-panel:     #EAF0EC;              /* section bands, sidebar */
  --bg-card:      #ffffff;              /* foreground cards */
  --bg-muted:     #E7EEE9;              /* tab trays, muted rows (paper-raised) */

  /* Type — ink steps */
  --text-primary:   #1B2620;            /* ink */
  --text-secondary: #49584F;            /* ink-light */
  --text-muted:     #58685E;            /* ink-faint */
  --text-subtle:    #7C8A80;            /* meta / disabled */

  /* Borders — the `line` hairline */
  --border-soft:    rgba(27, 38, 32, 0.06);
  --border-default: #DCE6DF;            /* line */
  --border-strong:  #C7D5CB;

  /* Focus ring — fern */
  --ring-focus:     rgba(23, 126, 84, 0.5);

  /* Sidebar — paper panel + fern active rail */
  --sidebar-bg:          #EAF0EC;
  --sidebar-bg-subtle:   rgba(27, 38, 32, 0.04);
  --sidebar-text:        #1B2620;
  --sidebar-text-muted:  #58685E;
  --sidebar-active-bg:   rgba(23, 126, 84, 0.12);
  --sidebar-active-text: #11603F;
  --sidebar-divider:     rgba(27, 38, 32, 0.08);

  /* Backwards-compatible aliases — existing views consume these */
  --bg-primary:   var(--bg-canvas);
  --bg-secondary: var(--bg-card);
  --bg-tertiary:  var(--bg-muted);
  --surface:      var(--bg-card);
  --card-bg:      var(--bg-card);
  --card-border:  var(--border-default);  /* hairline cards */
  --border-color: var(--border-default);

  /* Standardized animation durations */
  --duration-fast: 300ms;
  --duration-medium: 500ms;
  --duration-slow: 800ms;
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);

  /* Pipeline stage colors — neutral → fern (Mira working) → dawn (money) */
  --pipeline-contacted: #BBC9C0;
  --pipeline-discovery: #8BD9B3;
  --pipeline-cart:      #2E9E6F;
  --pipeline-order:     #177E54;
  --pipeline-paid:      #A35F0C;        /* dawn — money */
  --pipeline-delivered: #834B0A;        /* dawn-deep — settled */
}

/* ----------------------------------------------------------------
   Dark mode removed in the MIN-233 morning-light migration: the
   marketing site is light-only, so the app follows suit. The `.dark`
   variable overrides, the theme toggle, and the theme-init script were
   all removed. Any residual `dark:` utility variants in views are inert
   and get cleaned up opportunistically.
   ---------------------------------------------------------------- */

/* ============================================
   TYPOGRAPHY BASE STYLES
   ============================================ */
body {
  font-family: var(--font-body, "Seravek", "Avenir Next", "Nunito Sans", system-ui, sans-serif);
  font-weight: 400;  /* artifact spec: regular body against 700 headings */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-display {
  font-family: var(--font-display, "Seravek", "Avenir Next", "Nunito Sans", system-ui, sans-serif);
  font-optical-sizing: auto;
}

.font-mono {
  font-family: var(--font-mono, "Seravek", "Avenir Next", "Nunito Sans", system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
}

/* Global affordances mirrored from mira-web (index.css): fern focus + selection. */
:focus-visible {
  outline: 2px solid var(--lime-500);
  outline-offset: 3px;
}

/* Form fields draw their own focus affordance (1px border turning fern via
   focus:border-lime-500), so the offset outline above would double it. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
}

::selection {
  background: var(--lime-500);
  color: var(--warm-50);
}

/* Section eyebrow / kicker — mono uppercase, the site's label device. */
.kicker {
  font-family: var(--font-mono, "Seravek", "Avenir Next", "Nunito Sans", system-ui, sans-serif);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-secondary);
}

/* ============================================
   THEME TRANSITIONS
   ============================================ */
html {
  scroll-behavior: smooth;
}

html.transitioning,
html.transitioning *,
html.transitioning *::before,
html.transitioning *::after {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}

/* ============================================
   PREMIUM GLASSMORPHISM EFFECTS
   ============================================ */
/* Morning-light has no glassmorphism: "glass" surfaces become solid
   white cards / paper with a hairline `line` border. */
.glass-effect {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
}

.glass-effect-dark {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
}

.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  box-shadow: none;
}

.glass-card-dark {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  box-shadow: none;
}

.glass-input {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  transition: border-color 0.2s var(--ease-premium), box-shadow 0.2s var(--ease-premium);
}

.glass-input:focus,
.glass-input:focus-visible {
  border-color: rgba(27, 38, 32, 0.4);
  box-shadow: 0 0 0 2px rgba(27, 38, 32, 0.1);
  outline: none;
}

/* ============================================
   PREMIUM CARD STYLES
   ============================================ */
.card-premium {
  position: relative;
  background: var(--bg-card);
  border-radius: 20px;
  padding: 1.5rem;
  transition: background 0.4s var(--ease-premium), border-color 0.2s var(--ease-premium);
  border: 1px solid var(--border-default);   /* hairline `line` — elevation without shadow */
  box-shadow: none;
}

.card-premium:hover {
  box-shadow: none;
}

/* ============================================
   PREMIUM BUTTONS
   ============================================ */
.btn-premium {
  position: relative;
  transition: background-color 0.3s var(--ease-premium);
}

.btn-premium:active {
  transform: scale(0.98);
}

.btn-premium:focus-visible {
  outline: 2px solid rgba(23, 126, 84, 0.5);
  outline-offset: 2px;
}

.btn-premium-glass {
  background: var(--lime-500);   /* fern */
  color: var(--warm-50);         /* paper text on fern */
  border: none;
  box-shadow: none;
}

.btn-premium-glass:hover {
  background: var(--lime-600);   /* fern-deep */
}

.btn-premium-outline {
  background: transparent;
  border: 1px solid rgba(27, 38, 32, 0.25);
  color: var(--text-primary);
  transition: background-color 0.3s var(--ease-premium), border-color 0.2s var(--ease-premium);
}

.btn-premium-outline:hover {
  background: rgba(27, 38, 32, 0.05);
  border-color: var(--text-primary);
}

/* ============================================
   PREMIUM GRADIENT TEXT
   ============================================ */
/* Morning-light has no animated gradient text; an accented word is
   simply set in fern (the product accent). */
.gradient-text {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--lime-500);   /* fern */
  animation: none;
}

@keyframes gradientText {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* ============================================
   STAT COUNTER STYLES
   ============================================ */
.stat-number {
  font-family: var(--font-mono, "Seravek", "Avenir Next", "Nunito Sans", system-ui, sans-serif);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ============================================
   ICON HOP ANIMATION
   ============================================ */
@keyframes iconHop {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-8px) scale(1.1);
  }
}

.icon-container-premium {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.icon-container-premium:hover {
  animation: iconHop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================
   ACCENT BORDER
   ============================================ */
.accent-border-left {
  position: relative;
}

.accent-border-left::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--lime-500);   /* fern rail */
  border-radius: 2px;
}

/* ============================================
   PROGRESS INDICATOR
   ============================================ */
.progress-step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-weight: 600;
  transition: all 0.4s var(--ease-premium);
}

.progress-step-inactive {
  background: var(--bg-card);
  color: var(--text-muted);
  border: 2px solid var(--border-default);
}

.progress-step-active {
  background: var(--lime-500);   /* fern */
  color: var(--warm-50);         /* paper */
  border: 2px solid var(--lime-500);
  box-shadow: none;
}

.progress-step-completed {
  background: rgba(23, 126, 84, 0.15);
  color: var(--lime-600);        /* fern-deep */
  border: 2px solid var(--lime-500);
}

.progress-connector {
  flex: 1;
  height: 2px;
  background: var(--border-default);
  transition: all 0.4s ease;
}

.progress-connector-active {
  background: var(--lime-500);   /* fern */
}

/* Existing floating animations */
@keyframes float {

  0%,
  100% {
    transform: translateY(0px) rotate(12deg);
  }

  50% {
    transform: translateY(-10px) rotate(12deg);
  }
}

@keyframes float-delayed {

  0%,
  100% {
    transform: translateY(0px) rotate(-12deg);
  }

  50% {
    transform: translateY(-15px) rotate(-12deg);
  }
}

@keyframes float-slow {

  0%,
  100% {
    transform: translateY(0px) rotate(45deg);
  }

  50% {
    transform: translateY(-8px) rotate(45deg);
  }
}

@keyframes float-reverse {

  0%,
  100% {
    transform: translateY(0px) rotate(-45deg);
  }

  50% {
    transform: translateY(-12px) rotate(-45deg);
  }
}

.animate-float {
  animation: float 4.8s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float-delayed 6.4s ease-in-out infinite;
  animation-delay: 1.6s;
}

.animate-float-slow {
  animation: float-slow 8s ease-in-out infinite;
  animation-delay: 3.2s;
}

.animate-float-reverse {
  animation: float-reverse 5.6s ease-in-out infinite;
  animation-delay: 0.8s;
}

/* Optimized entrance animations with better easing */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(20px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes typewriter {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes pulseGlow {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(23, 126, 84, 0.3);
  }

  50% {
    box-shadow: 0 0 30px rgba(23, 126, 84, 0.6);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Optimized animation classes with better performance */
.animate-fade-in-up {
  animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  will-change: transform, opacity;
}

.animate-fade-in-left {
  animation: fadeInLeft 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  will-change: transform, opacity;
}

.animate-fade-in-right {
  animation: fadeInRight 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  will-change: transform, opacity;
}

.animate-scale-in {
  animation: scaleIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  will-change: transform, opacity;
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}

.animate-pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

.animate-shimmer {
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.4),
      transparent);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

.animate-count-up {
  animation: countUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  will-change: transform, opacity;
}

/* Optimized staggered animation delays */
.animate-delay-100 {
  animation-delay: 0.1s;
}

.animate-delay-200 {
  animation-delay: 0.2s;
}

.animate-delay-300 {
  animation-delay: 0.3s;
}

.animate-delay-400 {
  animation-delay: 0.4s;
}

.animate-delay-500 {
  animation-delay: 0.5s;
}

.animate-delay-600 {
  animation-delay: 0.6s;
}

/* Enhanced hover effects with better performance */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.hover-lift:hover {
  transform: translateY(-4px);
}

.hover-scale {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-glow {
  transition: background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Morning-light: light-sweep ::before removed (MIN-233). Still applied by
   auth view CTAs (sessions/registrations/passwords/etc); hovers there are
   color-only like every other button. */
.btn-shimmer {
  position: relative;
}

/* Scroll reveal animations with better performance */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Optimized typing indicator animation */
@keyframes typing {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }

  30% {
    transform: translateY(-8px);
    opacity: 1;
  }
}

.typing-dot {
  animation: typing 1.4s infinite ease-in-out;
  will-change: transform;
}

.typing-dot:nth-child(1) {
  animation-delay: 0s;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

/* Optimized message bubble animations */
@keyframes slideInMessage {
  from {
    opacity: 0;
    transform: translateX(-30px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes slideInMessageRight {
  from {
    opacity: 0;
    transform: translateX(30px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.message-slide-in-left {
  animation: slideInMessage 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  will-change: transform, opacity;
}

.message-slide-in-right {
  animation: slideInMessageRight 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  will-change: transform, opacity;
}

/* Performance optimizations */
.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Mobile-specific overrides for chat demo */
@media (max-width: 768px) {

  /* Disable all chat demo animations on mobile */
  .message-slide-in-left,
  .message-slide-in-right {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Disable typing indicator animation on mobile */
  .typing-dot {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Disable hover effects on mobile */
  .hover-lift:hover,
  .hover-scale:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Ensure chat demo container has no hover effects */
  .hover-lift {
    transition: none !important;
  }
}

/* Reduced motion preferences */
@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;
  }

  .hover-lift:hover,
  .hover-scale:hover {
    transform: none !important;
  }

  /* Disable all chat demo animations for reduced motion */
  .message-slide-in-left,
  .message-slide-in-right,
  .typing-dot {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Intersection observer optimization */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Prevent layout shifts during animations */
.animation-container {
  contain: layout style paint;
}

/* Optimize repaints */
.optimized-animation {
  transform: translateZ(0);
  will-change: transform, opacity;
}

/* AI Sparkle animation */
@keyframes sparkle-pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(0.95);
  }
}

/* ============================================
   CHECKBOX CARD INDICATOR STYLES
   Uses :has() selector for parent-aware styling
   ============================================ */
/* Checkbox indicator styling when checked */
label:has(.delivery-checkbox:checked) .checkbox-indicator,
label:has(.feedback-checkbox:checked) .checkbox-indicator {
  background-color: #15754E;
  border-color: #15754E;
}

label:has(.delivery-checkbox:checked) .checkbox-check,
label:has(.feedback-checkbox:checked) .checkbox-check {
  opacity: 1;
}

/* ============================================
   SCROLLBAR UTILITIES
   ============================================ */
/* Hide scrollbar but keep scroll functionality */
.scrollbar-hide {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

/* ============================================
   PREMIUM DAMPED ANIMATIONS
   ============================================ */
/* Damped spring easing for premium feel */
.ease-damped {
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Button press feedback */
.btn-press {
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-press:active {
  transform: scale(0.95);
}

/* Suggestion bubble entrance */
@keyframes suggestionSlideIn {
  from {
    opacity: 0;
    transform: translateX(30px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.suggestion-enter {
  animation: suggestionSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Message bubble entrance from left (customer) */
@keyframes messageSlideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Message bubble entrance from right (operator/bot) */
@keyframes messageSlideInRight {
  from {
    opacity: 0;
    transform: translateX(20px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.message-enter-left {
  animation: messageSlideInLeft 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.message-enter-right {
  animation: messageSlideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}