@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700;800&display=swap');

/* Central typography and ShadCN-style semantic theme tokens. */
:root {
  --font-en: 'Syne', ui-sans-serif, system-ui, sans-serif;
  --font-ar: 'Cairo', ui-sans-serif, system-ui, sans-serif;
  --font-sans: var(--font-en);

  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 3.8% 46.1%;
  --border: 240 5.9% 90%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;

  --primary-50: 0 0% 98%;
  --primary-100: 0 0% 96%;
  --primary-200: 0 0% 90%;
  --primary-300: 0 0% 83%;
  --primary-400: 0 0% 64%;
  --primary-500: var(--primary);
  --primary-600: 0 0% 4%;
  --primary-700: 0 0% 4%;
  --surface-0: var(--background);
  --surface-50: 0 0% 98%;
  --surface-100: 0 0% 96%;
  --surface-200: var(--border);
  --ink-900: var(--foreground);
  --ink-700: 0 0% 25%;
  --ink-500: var(--muted);
  --ink-300: 0 0% 83%;
  --success: 142 71% 45%;
  --warning: 38 92% 50%;
  --danger: 0 84% 60%;
  --warning-50: 48 96% 89%;
  --warning-100: 48 96% 82%;
  --warning-200: 48 97% 77%;
  --warning-500: var(--warning);
  --warning-600: 32 95% 44%;
  --warning-700: 26 90% 37%;
  --white: 0 0% 100%;
  --black: 0 0% 0%;
}

html[lang='en'] { --font-sans: var(--font-en); font-family: var(--font-en); direction: ltr; }
html[lang='ar'] { --font-sans: var(--font-ar); font-family: var(--font-ar); direction: rtl; }

html.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 5% 64.9%;
  --border: 240 3.7% 15.9%;
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  --primary-50: 240 3.7% 15.9%;
  --primary-100: 240 3.7% 18%;
  --primary-200: 240 3.7% 25%;
  --primary-300: 240 5% 35%;
  --primary-400: 240 5% 55%;
  --primary-500: var(--primary);
  --primary-600: 0 0% 100%;
  --primary-700: 0 0% 100%;
  --surface-0: var(--background);
  --surface-50: 240 10% 5.5%;
  --surface-100: var(--secondary);
  --surface-200: var(--border);
  --ink-900: var(--foreground);
  --ink-700: 0 0% 83%;
  --ink-500: var(--muted);
  --ink-300: 240 5% 35%;
  --warning-50: 48 33% 15%;
  --warning-100: 48 33% 19%;
  --warning-200: 48 33% 25%;
  --warning-500: 38 92% 50%;
  --warning-600: 38 92% 55%;
  --warning-700: 48 96% 75%;
  color-scheme: dark;
}

html:not(.dark) { color-scheme: light; }
html, body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }
html[lang] body, html[lang] button, html[lang] input, html[lang] select, html[lang] textarea { font-family: var(--font-sans); }
html.dark .bg-white { background-color: hsl(var(--card)); }
html.dark header.bg-white\/80 { background-color: hsl(var(--card) / 0.8); }
html.dark header.bg-white\/90 { background-color: hsl(var(--card) / 0.9); }
html.dark header.bg-white\/95 { background-color: hsl(var(--card) / 0.95); }

/* Shared semantic-utility fallback for the CDN mockup environment. */
.bg-surface-0 { background-color: hsl(var(--surface-0)) !important; }
.bg-surface-50 { background-color: hsl(var(--surface-50)) !important; }
.bg-surface-100 { background-color: hsl(var(--surface-100)) !important; }
.bg-surface-200 { background-color: hsl(var(--surface-200)) !important; }
.border-surface-200 { border-color: hsl(var(--surface-200)) !important; }
.text-ink-900 { color: hsl(var(--ink-900)) !important; }
.text-ink-700 { color: hsl(var(--ink-700)) !important; }
.text-ink-500 { color: hsl(var(--ink-500)) !important; }
.text-ink-300 { color: hsl(var(--ink-300)) !important; }
.bg-primary-500 { background-color: hsl(var(--primary-500)) !important; }
.text-primary-500 { color: hsl(var(--primary-500)) !important; }
.text-primary-600 { color: hsl(var(--primary-600)) !important; }
.text-primary-700 { color: hsl(var(--primary-700)) !important; }
.border-primary-500 { border-color: hsl(var(--primary-500)) !important; }

/* Radar animation for matching */
@keyframes radar-ping {
  0%   { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}
.radar-ping { animation: radar-ping 2s cubic-bezier(0,0,0.2,1) infinite; }

/* Waveform for voice */
@keyframes wave {
  0%,100% { transform: scaleY(0.4); }
  50%     { transform: scaleY(1); }
}
.wave-bar { animation: wave 1s ease-in-out infinite; }
.wave-bar:nth-child(2){ animation-delay: .1s; }
.wave-bar:nth-child(3){ animation-delay: .2s; }
.wave-bar:nth-child(4){ animation-delay: .3s; }
.wave-bar:nth-child(5){ animation-delay: .4s; }
.wave-bar:nth-child(6){ animation-delay: .5s; }

/* Pulse dot */
@keyframes pulse-dot {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.4; }
}
.pulse-dot { animation: pulse-dot 1.5s ease-in-out infinite; }

/* Fade in */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fade-in 0.4s ease-out; }

/* Typing indicator */
@keyframes typing {
  0%,60%,100% { transform: translateY(0); }
  30%         { transform: translateY(-4px); }
}
.typing-dot { animation: typing 1.2s infinite; }
.typing-dot:nth-child(2){ animation-delay: .2s; }
.typing-dot:nth-child(3){ animation-delay: .4s; }

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Header mount points retain space for the fixed shared header. */
#ln-header { min-height: 4rem; }