/* Wekoo · shadcn-style tokens
   HSL channels (h s% l%) so Tailwind's hsl(var(--x)) wiring works.
   SDKAPPA blue is wired to --primary so the brand still leads. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --background: 0 0% 100%;
  --foreground: 228 56% 13%;

  --card: 0 0% 100%;
  --card-foreground: 228 56% 13%;

  --popover: 0 0% 100%;
  --popover-foreground: 228 56% 13%;

  /* SDKAPPA deep-blue */
  --primary: 207 100% 32%;
  --primary-foreground: 0 0% 100%;

  --secondary: 225 47% 95%;
  --secondary-foreground: 207 100% 32%;

  --muted: 225 47% 95%;
  --muted-foreground: 225 16% 50%;

  --accent: 196 100% 96%;
  --accent-foreground: 207 100% 32%;

  --destructive: 351 67% 55%;
  --destructive-foreground: 0 0% 100%;

  --success: 165 71% 37%;
  --success-foreground: 0 0% 100%;

  --warning: 32 79% 48%;
  --warning-foreground: 0 0% 100%;

  --border: 224 30% 90%;
  --input: 224 30% 90%;
  --ring: 196 100% 46%;

  --radius: 0.625rem;

  /* Ribbon gradient stays special-purpose */
  --ribbon: linear-gradient(135deg, #00BFF1 0%, #00B0ED 22%, #0092D3 48%, #0058A4 74%, #2C3690 100%);

  /* Charts */
  --chart-1: 207 100% 32%;
  --chart-2: 196 100% 46%;
  --chart-3: 180 100% 39%;
  --chart-4: 235 53% 37%;
  --chart-5: 211 65% 47%;

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.dark {
  --background: 228 56% 8%;
  --foreground: 225 47% 95%;

  --card: 228 50% 12%;
  --card-foreground: 225 47% 95%;

  --popover: 228 50% 12%;
  --popover-foreground: 225 47% 95%;

  --primary: 196 100% 50%;
  --primary-foreground: 228 56% 8%;

  --secondary: 228 40% 18%;
  --secondary-foreground: 225 47% 95%;

  --muted: 228 40% 18%;
  --muted-foreground: 225 19% 64%;

  --accent: 228 40% 18%;
  --accent-foreground: 225 47% 95%;

  --destructive: 351 67% 55%;
  --destructive-foreground: 0 0% 100%;

  --success: 165 71% 45%;
  --warning: 32 79% 55%;

  --border: 228 30% 20%;
  --input: 228 30% 20%;
  --ring: 196 100% 50%;
}

/* Base element styles */
* { border-color: hsl(var(--border)); }
html { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  font-feature-settings: "cv02","cv03","cv04","cv11";
}

/* Scrollbar — subtle, shadcn-style */
.shc-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.shc-scroll::-webkit-scrollbar-track { background: transparent; }
.shc-scroll::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.shc-scroll::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / 0.4); background-clip: content-box; border: 2px solid transparent; }

/* Signature canvas needs touch-action none */
.sig-canvas { touch-action: none; }

/* QR scanner aesthetics — keep the bespoke camera viewport */
.qr-cam {
  background:
    radial-gradient(circle at 40% 35%, hsl(196 100% 46% / 0.12), transparent 55%),
    radial-gradient(circle at 70% 70%, hsl(207 100% 32% / 0.18), transparent 60%),
    repeating-linear-gradient(transparent 0 3px, hsl(0 0% 100% / 0.015) 3px 4px),
    #050810;
}
.qr-beam {
  animation: qr-beam 2.4s cubic-bezier(0.65,0,0.35,1) infinite;
  filter: drop-shadow(0 0 6px hsl(196 100% 46%));
}
@keyframes qr-beam {
  0%, 100% { top: 8px; opacity: 0.4; }
  50% { top: calc(100% - 10px); opacity: 1; }
}
.qr-dot-pulse { animation: qr-pulse 1.4s ease-in-out infinite; }
@keyframes qr-pulse { 0%,100% { opacity: 0.4 } 50% { opacity: 1 } }

/* Toast slide-in */
.shc-toast-in { animation: shc-toast-in 280ms cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes shc-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Success overlay */
.shc-success-in { animation: shc-success-in 320ms cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes shc-success-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.shc-success-pop { animation: shc-success-pop 480ms cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes shc-success-pop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

/* Bar chart fill transition */
.bar-grow { transition: height 400ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.donut-grow circle { transition: stroke-dasharray 500ms cubic-bezier(0.22, 0.61, 0.36, 1); }

/* Dialog backdrop & content fade — shadcn uses CSS animation for these */
.shc-overlay { animation: shc-overlay 180ms cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes shc-overlay { from { opacity: 0 } to { opacity: 1 } }
.shc-dialog { animation: shc-dialog 200ms cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes shc-dialog {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}