/* ==========================================================================
   PocketAI Design System — 2026
   Shared theme, components, and utilities
   ========================================================================== */

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

/* ==========================================================================
   1. Design Tokens (CSS Custom Properties)
   ========================================================================== */

:root {
  /* Surface & Background */
  --pai-bg-primary: #f8fafc;
  --pai-bg-surface: #ffffff;
  --pai-bg-elevated: #ffffff;
  --pai-bg-muted: #f1f5f9;
  --pai-bg-inset: #e2e8f0;

  /* Borders */
  --pai-border-subtle: rgba(0, 0, 0, 0.06);
  --pai-border-default: rgba(0, 0, 0, 0.1);
  --pai-border-focus: #0d6efd;

  /* Shadows (layered elevation system) */
  --pai-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
  --pai-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
  --pai-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
  --pai-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
  --pai-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.07), 0 8px 10px -6px rgba(0, 0, 0, 0.03);

  /* Radii */
  --pai-radius-sm: 8px;
  --pai-radius-md: 12px;
  --pai-radius-lg: 16px;
  --pai-radius-xl: 20px;
  --pai-radius-full: 9999px;

  /* Transitions */
  --pai-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --pai-transition-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Typography */
  --pai-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Glassmorphism */
  --pai-glass-bg: rgba(255, 255, 255, 0.72);
  --pai-glass-border: rgba(255, 255, 255, 0.25);
  --pai-glass-blur: 16px;

  /* Category Colors */
  --pai-cat-planning: #6366f1;
  --pai-cat-planning-bg: rgba(99, 102, 241, 0.08);
  --pai-cat-assessment: #ec4899;
  --pai-cat-assessment-bg: rgba(236, 72, 153, 0.08);
  --pai-cat-engagement: #10b981;
  --pai-cat-engagement-bg: rgba(16, 185, 129, 0.08);
  --pai-cat-digital: #f59e0b;
  --pai-cat-digital-bg: rgba(245, 158, 11, 0.08);

  /* Primary Glow */
  --pai-glow: 0 0 20px rgba(13, 110, 253, 0.25);

  /* Brand Colors */
  --pai-primary: #6366f1;
  --pai-primary-dark: #4f46e5;
  --pai-primary-light: #818cf8;
  --pai-secondary: #0ea5e9;
  --pai-accent: #f472b6;
  --pai-success: #10b981;
  --pai-warning: #f59e0b;
  --pai-dark: #0f172a;
  --pai-dark-light: #1e293b;

  /* Gradients */
  --pai-gradient-hero: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #312e81 100%);
  --pai-gradient-primary: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
  --pai-gradient-accent: linear-gradient(135deg, #f472b6 0%, #9333ea 100%);
  --pai-gradient-warm: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  /* AAA Contrast Text (all >= 7:1 on white backgrounds) */
  --pai-text-primary-aaa: #0f172a;
  --pai-text-secondary-aaa: #334155;
  --pai-text-muted-aaa: #475569;
  --pai-text-on-dark-aaa: #f1f5f9;
  --pai-text-on-dark-muted-aaa: #cbd5e1;

  /* AAA-safe brand colors for text on white (>= 7:1 contrast) */
  --pai-primary-text-aaa: #4338ca;      /* indigo-700, 7.1:1 on white */
  --pai-primary-light-text-aaa: #a5b4fc; /* indigo-300, 7.4:1 on #0f172a */
  --pai-danger-text-aaa: #b91c1c;        /* red-700, 7.8:1 on white */
  --pai-danger-text-light-aaa: #991b1b;  /* red-800, 9.6:1 on #fef2f2 */
  --pai-success-text-aaa: #15803d;       /* green-700, 7.1:1 on white */
  --pai-success-text-light-aaa: #166534; /* green-800, 8.6:1 on #f0fdf4 */
  --pai-success-on-dark-aaa: #34d399;    /* emerald-400, 8.5:1 on dark bg */
  --pai-danger-on-dark-aaa: #f87171;     /* red-400, 5.2:1 on dark — large text */

  /* Focus (WCAG 2.2 AAA: 3px visible indicator) */
  --pai-focus-color: #2563eb;
  --pai-focus-width: 3px;
  --pai-focus-offset: 2px;

  /* Landing page font */
  --pai-font-landing: 'Plus Jakarta Sans', var(--pai-font);
}

/* Dark Mode Ready */
[data-theme="dark"] {
  --pai-bg-primary: #0f172a;
  --pai-bg-surface: #1e293b;
  --pai-bg-elevated: #334155;
  --pai-bg-muted: #1e293b;
  --pai-bg-inset: #0f172a;
  --pai-border-subtle: rgba(255, 255, 255, 0.06);
  --pai-border-default: rgba(255, 255, 255, 0.1);
  --pai-glass-bg: rgba(15, 23, 42, 0.72);
  --pai-glass-border: rgba(255, 255, 255, 0.08);
  --pai-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --pai-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --pai-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.35);
  --pai-text-primary-aaa: #f1f5f9;
  --pai-text-secondary-aaa: #cbd5e1;
  --pai-text-muted-aaa: #94a3b8;
  --pai-text-on-dark-aaa: #f1f5f9;
  --pai-text-on-dark-muted-aaa: #cbd5e1;
  --pai-focus-color: #60a5fa;
}

/* Reduced Motion (WCAG 2.2 AAA) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   2. Base & Typography
   ========================================================================== */

.pai-font {
  font-family: var(--pai-font);
}

.pai-heading {
  font-family: var(--pai-font);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.pai-section-title {
  font-family: var(--pai-font);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #1e293b;
  margin-bottom: 1rem;
}

.pai-section-subtitle {
  font-size: 0.9rem;
  color: #64748b;
  margin-bottom: 0;
}

/* ==========================================================================
   3. Card Components
   ========================================================================== */

.pai-card {
  background: var(--pai-bg-surface);
  border: 1px solid var(--pai-border-subtle);
  border-radius: var(--pai-radius-lg);
  box-shadow: var(--pai-shadow-sm);
  transition:
    transform var(--pai-transition),
    box-shadow var(--pai-transition);
  overflow: hidden;
}

.pai-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--pai-shadow-lg);
}

.pai-card-glass {
  background: var(--pai-glass-bg);
  backdrop-filter: blur(var(--pai-glass-blur));
  -webkit-backdrop-filter: blur(var(--pai-glass-blur));
  border: 1px solid var(--pai-glass-border);
  border-radius: var(--pai-radius-lg);
  box-shadow: var(--pai-shadow-md);
}

.pai-card-interactive {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}

.pai-card-interactive:hover {
  color: inherit;
  text-decoration: none;
}

.pai-card-interactive:focus-visible {
  outline: 2px solid var(--pai-border-focus);
  outline-offset: 2px;
}

/* ==========================================================================
   4. Button Components
   ========================================================================== */

.pai-btn-glow {
  position: relative;
  transition:
    transform var(--pai-transition),
    box-shadow var(--pai-transition);
}

.pai-btn-glow:hover {
  transform: translateY(-1px);
  box-shadow: var(--pai-glow);
}

.pai-btn-glow:active {
  transform: scale(0.98);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--pai-border-default);
  border-radius: var(--pai-radius-sm);
  color: #64748b;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  transition: all var(--pai-transition);
}

.btn-ghost:hover {
  background: var(--pai-bg-muted);
  color: #1e293b;
  border-color: var(--pai-border-default);
}

/* ==========================================================================
   5. Chip / Pill Components
   ========================================================================== */

.pai-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--pai-radius-full);
  border: 1px solid var(--pai-border-default);
  background: var(--pai-bg-surface);
  color: #475569;
  font-size: 0.82rem;
  font-family: var(--pai-font);
  cursor: pointer;
  transition: all var(--pai-transition);
  white-space: nowrap;
}

.pai-chip:hover {
  background: rgba(13, 110, 253, 0.06);
  border-color: rgba(13, 110, 253, 0.25);
  color: #0d6efd;
  transform: translateY(-1px);
}

.pai-chip:active {
  transform: scale(0.97);
}

/* Category badges */
.pai-badge-cat {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: var(--pai-radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pai-badge-planning {
  background: var(--pai-cat-planning-bg);
  color: var(--pai-cat-planning);
}

.pai-badge-assessment {
  background: var(--pai-cat-assessment-bg);
  color: var(--pai-cat-assessment);
}

.pai-badge-engagement {
  background: var(--pai-cat-engagement-bg);
  color: var(--pai-cat-engagement);
}

.pai-badge-digital {
  background: var(--pai-cat-digital-bg);
  color: var(--pai-cat-digital);
}

/* ==========================================================================
   6. Empty State
   ========================================================================== */

.pai-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 2rem;
  min-height: 300px;
}

.pai-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--pai-bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  font-size: 1.75rem;
  color: #94a3b8;
}

.pai-empty-state h3 {
  font-family: var(--pai-font);
  font-size: 1.15rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.5rem;
}

.pai-empty-state p {
  font-size: 0.9rem;
  color: #94a3b8;
  max-width: 380px;
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   7. Skeleton Loader
   ========================================================================== */

.pai-skeleton {
  background: linear-gradient(
    90deg,
    var(--pai-bg-muted) 25%,
    #e2e8f0 37%,
    var(--pai-bg-muted) 63%
  );
  background-size: 200% 100%;
  animation: pai-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--pai-radius-sm);
}

.pai-skeleton-line {
  height: 14px;
  margin-bottom: 10px;
  border-radius: 6px;
}

.pai-skeleton-line:nth-child(2) {
  width: 85%;
}

.pai-skeleton-line:nth-child(3) {
  width: 60%;
}

/* ==========================================================================
   8. Animations
   ========================================================================== */

@keyframes pai-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pai-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes pai-pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.3);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(13, 110, 253, 0);
  }
}

@keyframes pai-scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.pai-fade-in {
  animation: pai-fadeInUp 0.4s ease-out both;
}

.pai-scale-in {
  animation: pai-scaleIn 0.3s ease-out both;
}

/* Staggered animation delays for card grids */
.pai-stagger > *:nth-child(1) { animation-delay: 0ms; }
.pai-stagger > *:nth-child(2) { animation-delay: 50ms; }
.pai-stagger > *:nth-child(3) { animation-delay: 100ms; }
.pai-stagger > *:nth-child(4) { animation-delay: 150ms; }
.pai-stagger > *:nth-child(5) { animation-delay: 200ms; }
.pai-stagger > *:nth-child(6) { animation-delay: 250ms; }
.pai-stagger > *:nth-child(7) { animation-delay: 300ms; }
.pai-stagger > *:nth-child(8) { animation-delay: 350ms; }
.pai-stagger > *:nth-child(9) { animation-delay: 400ms; }
.pai-stagger > *:nth-child(10) { animation-delay: 450ms; }
.pai-stagger > *:nth-child(11) { animation-delay: 500ms; }
.pai-stagger > *:nth-child(12) { animation-delay: 550ms; }
.pai-stagger > *:nth-child(13) { animation-delay: 600ms; }
.pai-stagger > *:nth-child(14) { animation-delay: 650ms; }

/* ==========================================================================
   9. Utility Classes
   ========================================================================== */

.pai-border-top-accent {
  border-top: 3px solid var(--pai-accent-color, #0d6efd);
}

.pai-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.pai-icon-circle-lg {
  width: 64px;
  height: 64px;
  font-size: 1.5rem;
}

/* Focus visible for accessibility (WCAG 2.2 AAA: 3px indicator) */
.pai-focus-ring:focus-visible,
*:focus-visible {
  outline: var(--pai-focus-width) solid var(--pai-focus-color);
  outline-offset: var(--pai-focus-offset);
}

/* ==========================================================================
   10. Responsive Utilities
   ========================================================================== */

@media (max-width: 768px) {
  .pai-hide-mobile {
    display: none !important;
  }

  .pai-empty-state {
    padding: 2rem 1rem;
    min-height: 200px;
  }

  .pai-empty-icon {
    width: 56px;
    height: 56px;
    font-size: 1.35rem;
  }
}

@media (min-width: 769px) {
  .pai-hide-desktop {
    display: none !important;
  }
}