@import 'tailwindcss';
@import '@archer/ui/styles/pricing-card.css';
@import '@archer/legal-render/web-styles.css';

/* Tailwind v4 Theme Configuration */
@theme {
  /* Shadcn/UI Color Palette - using CSS custom properties */
  --color-background: hsl(0 0% 98%);
  --color-foreground: hsl(222 47% 11%);

  --color-card: hsl(0 0% 100%);
  --color-card-foreground: hsl(222 47% 11%);

  --color-popover: hsl(0 0% 100%);
  --color-popover-foreground: hsl(222 47% 11%);

  --color-primary: hsl(199 89% 39%);
  --color-primary-foreground: hsl(0 0% 100%);
  --color-primary-900: hsl(199 89% 27%); /* Dark primary for gradients */

  --color-secondary: hsl(210 40% 96%);
  --color-secondary-foreground: hsl(222 47% 11%);

  --color-muted: hsl(210 40% 96%);
  --color-muted-foreground: hsl(215 16% 47%);

  --color-accent: hsl(199 95% 96%);
  --color-accent-foreground: hsl(199 89% 39%);

  --color-destructive: hsl(0 84% 60%);
  --color-destructive-foreground: hsl(0 0% 100%);

  --color-border: hsl(214 32% 91%);
  --color-input: hsl(214 32% 91%);
  --color-ring: hsl(199 89% 39%);

  /* Slate colors for dark backgrounds and sidebar */
  --color-slate-50: hsl(210 40% 98%); /* #f8fafc - light slate */
  --color-slate-200: hsl(214 32% 91%); /* #e2e8f0 - border slate */
  --color-slate-400: hsl(215 20% 65%); /* #94a3b8 - muted text */
  --color-slate-500: hsl(215 16% 47%); /* #64748b - muted text */
  --color-slate-800: hsl(217 33% 17%); /* #1e293b - sidebar dark */
  --color-slate-900: hsl(222 47% 11%); /* #0f172a - darkest slate */

  /* Sidebar semantic colors */
  --color-sidebar: hsl(217 33% 17%); /* slate-800 #1e293b */
  --color-sidebar-border: hsl(222 47% 11%); /* slate-900 #0f172a */
}

@layer base {
  :root {
    /* ========================================
     * SHADCN/UI THEME VARIABLES (HSL format)
     * TWWIM Brand Colors - Light Theme
     * ======================================== */

    /* Base colors - Clean white backgrounds for content */
    --background: 0 0% 98%; /* slate-50 #f8fafc - subtle off-white */
    --foreground: 222 47% 11%; /* gray-900 #111827 */

    /* Card colors - Pure white for elevation */
    --card: 0 0% 100%; /* white */
    --card-foreground: 222 47% 11%; /* gray-900 #111827 */

    /* Popover colors */
    --popover: 0 0% 100%; /* white */
    --popover-foreground: 222 47% 11%; /* gray-900 #111827 */

    /* Primary colors - TWWIM Brand (sky-600 #0284c7) */
    --primary: 199 89% 39%; /* #0284c7 - TWWIM main brand */
    --primary-foreground: 0 0% 100%; /* white */

    /* Secondary colors - Light slate for subtle backgrounds */
    --secondary: 210 40% 96%; /* slate-100 #f1f5f9 */
    --secondary-foreground: 222 47% 11%; /* gray-900 #111827 */

    /* Muted colors - Slate palette for consistency */
    --muted: 210 40% 96%; /* slate-100 #f1f5f9 */
    --muted-foreground: 215 16% 47%; /* slate-600 #475569 */

    /* Accent colors - Primary brand for interactive elements */
    --accent: 199 95% 96%; /* primary-50 #f0f9ff */
    --accent-foreground: 199 89% 39%; /* primary-600 #0284c7 */

    /* Destructive colors - TWWIM error red */
    --destructive: 0 84% 60%; /* red-500 #ef4444 */
    --destructive-foreground: 0 0% 100%; /* white */

    /* Border colors - Subtle slate borders */
    --border: 214 32% 91%; /* slate-200 #e2e8f0 */
    --input: 214 32% 91%; /* slate-200 #e2e8f0 */
    --ring: 199 89% 39%; /* primary-600 #0284c7 */

    /* Border radius */
    --radius: 0.5rem; /* 8px */

    /* ========================================
     * CUSTOM TWWIM VARIABLES (Hex format)
     * Based on TWWIM Landing Page Brand Colors
     * ======================================== */

    /* Sidebar - TWWIM Dark Slate Palette */
    --color-sidebar: #1e293b; /* slate-800 - dark sidebar */
    --color-sidebar-hover: #334155; /* slate-700 - hover state */
    --color-sidebar-text: #f8fafc; /* slate-50 - light text on dark */
    --color-sidebar-border: #0f172a; /* slate-900 - subtle borders */

    /* Primary Brand Colors (Sky Blue) */
    --color-primary: #0284c7; /* primary-600 - main brand */
    --color-primary-light: #38bdf8; /* primary-400 - interactive elements */
    --color-primary-dark: #0369a1; /* primary-700 - hover states */
    --color-primary-glow: rgba(14, 165, 233, 0.2); /* primary-500 with opacity */

    /* Background Colors */
    --color-background: #f8fafc; /* slate-50 - main background */
    --color-background-card: #ffffff; /* white - card backgrounds */
    --color-background-muted: #f1f5f9; /* slate-100 - muted sections */

    /* Text Colors */
    --color-text-primary: #111827; /* gray-900 - main text */
    --color-text-secondary: #475569; /* slate-600 - secondary text */
    --color-text-muted: #64748b; /* slate-500 - muted text */

    /* Border Colors */
    --color-border: #e2e8f0; /* slate-200 - subtle borders */
    --color-border-strong: #cbd5e1; /* slate-300 - stronger borders */

    /* Semantic Colors (from TWWIM brand) */
    --color-success: #22c55e; /* green-500 - success states */
    --color-warning: #eab308; /* yellow-500 - warning states */
    --color-error: #ef4444; /* red-500 - error states */
    --color-info: #0ea5e9; /* primary-500 - info states */

    /* Typography (TWWIM brand fonts) */
    --font-family-sans: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    --font-family-mono: 'Fira Code', Consolas, Monaco, 'Courier New', monospace;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;

    /* Spacing Scale */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* Shadows - TWWIM glow effects */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-glow: 0 0 20px rgba(14, 165, 233, 0.15);
    --shadow-glow-lg: 0 0 30px rgba(14, 165, 233, 0.2);
  }

  .dark {
    /* ========================================
     * DARK MODE - TWWIM Brand Dark Theme
     * Based on TWWIM Landing Page Hero Section
     * ======================================== */

    /* Base colors - TWWIM dark slate backgrounds */
    --background: 222 47% 11%; /* gray-900 #111827 */
    --foreground: 210 40% 98%; /* slate-50 #f8fafc */

    /* Card colors - Dark slate with depth */
    --card: 217 33% 17%; /* slate-800 #1e293b */
    --card-foreground: 210 40% 98%; /* slate-50 #f8fafc */

    /* Popover colors */
    --popover: 217 33% 17%; /* slate-800 #1e293b */
    --popover-foreground: 210 40% 98%; /* slate-50 #f8fafc */

    /* Primary colors - Lighter sky for dark backgrounds */
    --primary: 199 89% 48%; /* sky-500 #0ea5e9 - more visible on dark */
    --primary-foreground: 0 0% 100%; /* white */

    /* Secondary colors - Darker slate */
    --secondary: 215 28% 17%; /* slate-700 #334155 */
    --secondary-foreground: 210 40% 98%; /* slate-50 #f8fafc */

    /* Muted colors */
    --muted: 215 28% 17%; /* slate-700 #334155 */
    --muted-foreground: 215 20% 65%; /* slate-400 #94a3b8 */

    /* Accent colors */
    --accent: 215 28% 17%; /* slate-700 #334155 */
    --accent-foreground: 199 89% 48%; /* sky-500 #0ea5e9 */

    /* Destructive colors */
    --destructive: 0 84% 60%; /* red-500 #ef4444 */
    --destructive-foreground: 210 40% 98%; /* slate-50 #f8fafc */

    /* Border colors - Dark slate borders */
    --border: 215 28% 17%; /* slate-700 #334155 */
    --input: 215 28% 17%; /* slate-700 #334155 */
    --ring: 199 89% 48%; /* sky-500 #0ea5e9 */

    /* Custom dark mode overrides */
    --color-background: #111827; /* gray-900 */
    --color-background-card: #1e293b; /* slate-800 */
    --color-background-muted: #0f172a; /* slate-900 */
    --color-text-primary: #f8fafc; /* slate-50 */
    --color-text-secondary: #cbd5e1; /* slate-300 */
    --color-text-muted: #94a3b8; /* slate-400 */
    --color-border: #334155; /* slate-700 */
    --color-border-strong: #475569; /* slate-600 */
  }
}

@layer base {
  * {
    border-color: hsl(var(--border));
  }
  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
  }
}

/* ========================================
 * CUSTOM ANIMATIONS
 * ======================================== */

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

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-4px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(4px);
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

/* Animation utility classes */
.animate-fadeInUp {
  animation: fadeInUp 0.5s ease-out;
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out;
}

.animate-fade-in {
  animation: fadeIn 0.2s ease-out;
}

.animate-scale-in {
  animation: scaleIn 0.2s ease-out;
}