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

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

@layer base {
  :root {
    /* ── Core Palette ─────────────────────────────── */
    --background: 0 0% 0%;
    /* #000000 */
    --surface: 220 12% 9%;
    /* #131418 */
    --surface-2: 220 10% 12%;
    /* #181b20 */
    --surface-3: 220 9% 16%;
    /* #22262e */

    --foreground: 0 0% 96%;
    --muted-fg: 220 8% 55%;
    --subtle-fg: 220 6% 35%;

    /* ── Accent: Blue ──────────────────────────────── */
    --accent: 217 91% 60%;
    /* #3b82f6 */
    --accent-dim: 217 70% 45%;
    --accent-fg: 0 0% 100%;
    /* white text on blue */

    /* ── Semantic ─────────────────────────────────── */
    --success: 142 71% 45%;
    --warning: 38 92% 50%;
    --danger: 0 84% 60%;
    --info: 199 89% 48%;

    /* ── Borders ──────────────────────────────────── */
    --border: 220 12% 18%;
    --border-subtle: 220 10% 13%;

    /* ── Radius ───────────────────────────────────── */
    --radius: 0.875rem;

    /* ── Shadows ──────────────────────────────────── */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.7);

    /* ── Sidebar ──────────────────────────────────── */
    --sidebar-background: 220 14% 7%;
    --sidebar-foreground: 0 0% 90%;
    --sidebar-primary: 217 91% 60%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 220 10% 12%;
    --sidebar-accent-foreground: 0 0% 98%;
    --sidebar-border: 220 12% 14%;
    --sidebar-ring: 217 91% 60%;

    /* ── Legacy compat ────────────────────────────── */
    --card: 220 12% 9%;
    --card-foreground: 0 0% 96%;
    --popover: 220 12% 9%;
    --popover-foreground: 0 0% 96%;
    --primary: 217 91% 60%;
    --primary-foreground: 0 0% 100%;
    --secondary: 220 10% 14%;
    --secondary-foreground: 0 0% 90%;
    --muted: 220 10% 14%;
    --muted-foreground: 220 8% 55%;
    --input: 220 10% 14%;
    --ring: 82 95% 59%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
  }
}

@layer base {

  *,
  *::before,
  *::after {
    @apply border-border box-border;
  }

  html {
    @apply antialiased;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.011em;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    letter-spacing: -0.025em;
    font-weight: 600;
  }
}

@layer utilities {

  /* ── Surface Cards ─────────────────────────────── */
  .card {
    background-color: hsl(var(--surface));
    border: 1px solid hsl(var(--border-subtle));
    border-radius: var(--radius);
  }

  .card-2 {
    background-color: hsl(var(--surface-2));
    border: 1px solid hsl(var(--border-subtle));
    border-radius: var(--radius);
  }

  /* ── Legacy glass (kept for compat) ───────────── */
  .glass {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.07);
  }

  .glass-strong {
    background: rgba(12, 13, 16, 0.85);
    backdrop-filter: blur(32px);
    border: 1px solid rgba(255, 255, 255, 0.06);
  }

  .glass-panel {
    background: hsl(var(--surface));
    border: 1px solid hsl(var(--border-subtle));
    border-radius: var(--radius);
  }

  .glass-card {
    background: hsl(var(--surface));
    border: 1px solid hsl(var(--border-subtle));
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
  }

  /* ── Accent Utilities ──────────────────────────── */
  .accent-text {
    color: hsl(var(--accent));
  }

  .accent-bg {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-fg));
  }

  .accent-border {
    border-color: hsl(var(--accent) / 0.35);
  }

  .accent-surface {
    background-color: hsl(var(--accent) / 0.1);
    border: 1px solid hsl(var(--accent) / 0.2);
    color: hsl(var(--accent));
  }

  /* ── Gradient Text ─────────────────────────────── */
  .gradient-text {
    background: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--info)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* ── Glow Effects ──────────────────────────────── */
  .glow-accent {
    box-shadow: 0 0 32px hsl(var(--accent) / 0.25);
  }

  .glow-blue {
    box-shadow: 0 0 32px rgba(59, 130, 246, 0.25);
  }

  .glow-green {
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
  }

  .glow-amber {
    box-shadow: 0 0 32px rgba(245, 158, 11, 0.25);
  }

  /* ── Stat Number ───────────────────────────────── */
  .stat-number {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    color: hsl(var(--foreground));
  }

  .stat-label {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: hsl(var(--muted-fg));
  }

  /* ── Tag / Pill ────────────────────────────────── */
  .tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    background: hsl(var(--surface-3));
    border: 1px solid hsl(var(--border-subtle));
    color: hsl(var(--muted-fg));
  }

  /* ── Status Dot Pulse ──────────────────────────── */
  .status-pulse {
    animation: status-pulse 2s ease-in-out infinite;
  }

  /* ── Scrollbar ─────────────────────────────────── */
  .custom-scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
    border-radius: 2px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-fg));
  }

  /* ── Shimmer ───────────────────────────────────── */
  .shimmer {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0) 100%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
  }

  /* ── Chat Bubbles ──────────────────────────────── */
  .chat-bubble-user {
    background: hsl(var(--surface-3));
    border-radius: 1rem 1rem 0.25rem 1rem;
    padding: 0.75rem 1rem;
    max-width: 80%;
  }

  .chat-bubble-ai {
    background: hsl(var(--accent) / 0.08);
    border: 1px solid hsl(var(--accent) / 0.15);
    border-radius: 1rem 1rem 1rem 0.25rem;
    padding: 0.75rem 1rem;
    max-width: 80%;
  }

  /* ── Sentiment Pills ───────────────────────────── */
  .sentiment-pill {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
  }

  .sentiment-excited {
    background: hsl(142 71% 45% / 0.15);
    color: hsl(142 71% 65%);
    border: 1px solid hsl(142 71% 45% / 0.25);
  }

  .sentiment-confused {
    background: hsl(38 92% 50% / 0.15);
    color: hsl(38 92% 65%);
    border: 1px solid hsl(38 92% 50% / 0.25);
  }

  .sentiment-neutral {
    background: hsl(var(--surface-3));
    color: hsl(var(--muted-fg));
    border: 1px solid hsl(var(--border-subtle));
  }

  /* ── Bento Grid ────────────────────────────────── */
  .bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }

  /* ── FaceID ────────────────────────────────────── */
  .faceid-ring {
    animation: faceid-pulse 2s ease-in-out infinite;
  }

  /* ── Skeleton ──────────────────────────────────── */
  .skeleton-pulse {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
  }
}

/* ── Keyframes ─────────────────────────────────────── */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

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

@keyframes status-pulse {

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

  50% {
    opacity: 0.6;
    transform: scale(1.15);
  }
}

@keyframes float {

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

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

@keyframes scan-line {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(100%);
  }
}

@keyframes faceid-pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    transform: scale(0.95);
    opacity: 0.5;
  }
}

@keyframes skeleton-pulse {

  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 0.6;
  }
}