@import "tailwindcss";
@plugin "daisyui";

@theme {
  --font-sans: "Fira Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

@font-face {
  font-family: "Fira Sans";
  src: url("/fonts/fira-sans/fira-sans-latin-400-normal.woff2") format("woff2");
  font-display: optional;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Fira Sans";
  src: url("/fonts/fira-sans/fira-sans-latin-500-normal.woff2") format("woff2");
  font-display: optional;
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Fira Sans";
  src: url("/fonts/fira-sans/fira-sans-latin-600-normal.woff2") format("woff2");
  font-display: optional;
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Fira Sans";
  src: url("/fonts/fira-sans/fira-sans-latin-700-normal.woff2") format("woff2");
  font-display: optional;
  font-weight: 700;
  font-style: normal;
}

@layer base {
  :root {
    --color-brand: #1e40af;
    --color-brand-light: #3b82f6;
    --color-brand-subtle: #dbeafe;
    --color-warm-accent: #d97706;
    --color-surface: #ffffff;
    --color-muted: #f1f5f9;
    --color-calm: #f8fafc;
    /* DaisyUI theme variables for skeleton and base-* utilities */
    --color-base-100: #ffffff;
    --color-base-200: #f1f5f9;
    --color-base-300: #cbd5e1;
  }
}

.excel-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  line-height: 1.5;
}

.excel-preview-table th,
.excel-preview-table td {
  border: 1px solid #e2e8f0;
  padding: 0.625rem 0.875rem;
  white-space: nowrap;
  text-align: left;
  color: #1e293b;
}

.excel-preview-table th {
  background-color: #f1f5f9;
  font-weight: 700;
  color: #334155;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.7rem;
}

.excel-preview-table tr:nth-child(even) td {
  background-color: #fafbfc;
}

.excel-preview-table tr:hover td {
  background-color: #eef2ff;
}

.excel-preview-table .excel-header {
  background-color: #e2e8f0;
  font-weight: 700;
  color: #1e293b;
}

.excel-preview-table .excel-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Smooth entrance animation for flow steps */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-slide-up {
  animation: fadeSlideUp 0.5s ease-out both;
}

.animate-fade-slide-up-delay-1 {
  animation-delay: 0.1s;
}

.animate-fade-slide-up-delay-2 {
  animation-delay: 0.2s;
}

.animate-fade-slide-up-delay-3 {
  animation-delay: 0.3s;
}

.animate-fade-slide-up-delay-4 {
  animation-delay: 0.4s;
}

/* Pulse ring for signature pad */
@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.3);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(59, 130, 246, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

.signature-pad-active {
  animation: pulse-ring 1.5s ease-out infinite;
}

/* Step indicator connected line */
@keyframes fillLine {
  from { width: 0%; }
  to { width: 100%; }
}

.step-line-fill {
  animation: fillLine 0.6s ease-out forwards;
}

/* Soft dotted background for flow pages */
.flow-bg {
  background-color: #f8fafc;
  background-image: radial-gradient(circle, #94a3b8 1px, transparent 1px);
  background-size: 20px 20px;
  background-attachment: fixed;
}