frontend/src/ui/styles.css

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

:root {
--bg: 0 0% 4%;
--fg: 0 0% 98%;

/* Persona thumbnails */
--hp-persona-thumb-sm: 48px;
--hp-persona-thumb-md: 72px;
--hp-persona-thumb-lg: 88px;
--hp-persona-thumb-xl: 112px;

/* Focus ring */
--hp-focus-ring: rgba(168, 85, 247, 0.55);
}

/* Persona thumbnail utilities */
.hp-persona-thumb {
  width: var(--hp-persona-thumb-lg);
  height: var(--hp-persona-thumb-lg);
  border-radius: 14px;
  overflow: hidden;
}
.hp-persona-thumb--md {
  width: var(--hp-persona-thumb-md);
  height: var(--hp-persona-thumb-md);
}
.hp-persona-thumb--xl {
  width: var(--hp-persona-thumb-xl);
  height: var(--hp-persona-thumb-xl);
}

body {
background: hsl(var(--bg));
color: hsl(var(--fg));
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
font-feature-settings: "liga" 1, "calt" 1;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes accountMenuIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}