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

/**
 * WP build CSS — same as index.css but with preflight scoped to #root.
 * Tailwind's `important: '#root'` in tailwind.config.wp.ts handles utility specificity.
 * This file scopes the base reset so WP admin chrome is unaffected.
 *
 * (c) 2026 TWWIM UG. All rights reserved. (www.twwim.com)
 */

/**
 * WP admin CSS override — UNLAYERED so it beats WP's unlayered styles.
 * Uses #root specificity to outweigh WP's element selectors.
 * Must be outside @layer to compete at same cascade level as WP admin CSS.
 */
#root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  font-weight: 400;
}
#root *, #root *::before, #root *::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: hsl(var(--border));
}
#root a { color: inherit; text-decoration: inherit; }
#root h1, #root h2, #root h3, #root h4, #root h5, #root h6 {
  font-size: inherit; font-weight: inherit;
}
#root p, #root h1, #root h2, #root h3, #root h4, #root h5, #root h6,
#root ul, #root ol, #root figure, #root blockquote, #root dl, #root dd,
#root hr, #root pre { margin: 0; }
#root ul, #root ol { list-style: none; padding: 0; }
#root img, #root svg, #root video, #root canvas, #root audio,
#root iframe, #root embed, #root object { display: block; vertical-align: middle; }
#root img, #root video { max-width: 100%; height: auto; }
#root input, #root button, #root textarea, #root select {
  font: inherit;
  color: inherit;
  background-color: transparent;
  margin: 0;
  padding: 0;
  min-height: auto;
  min-width: auto;
  max-width: none;
  width: auto;
  line-height: inherit;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
#root input, #root button, #root textarea {
  -webkit-appearance: none;
  appearance: none;
}
#root button { cursor: pointer; }
#root table { border-collapse: collapse; border-spacing: 0; }

/* Layered base — theme variables and colors (OK in @layer, no conflict) */
@layer base {
  #root {
    color: hsl(var(--foreground));
    background-color: hsl(var(--background));
  }
}

/* Tailwind v4 Theme Configuration — same as index.css */
@theme {
  --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%);
  --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%);
  --color-slate-50: hsl(210 40% 98%);
  --color-slate-200: hsl(214 32% 91%);
  --color-slate-400: hsl(215 20% 65%);
  --color-slate-500: hsl(215 16% 47%);
  --color-slate-800: hsl(217 33% 17%);
  --color-slate-900: hsl(222 47% 11%);
  --color-sidebar: hsl(217 33% 17%);
  --color-sidebar-border: hsl(222 47% 11%);
}

@layer base {
  :root {
    --background: 0 0% 98%;
    --foreground: 222 47% 11%;
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;
    --primary: 199 89% 39%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222 47% 11%;
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;
    --accent: 199 95% 96%;
    --accent-foreground: 199 89% 39%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 199 89% 39%;
    --radius: 0.5rem;
    --color-sidebar: #1e293b;
    --color-sidebar-hover: #334155;
    --color-sidebar-text: #f8fafc;
    --color-sidebar-border: #0f172a;
    --color-primary: #0284c7;
    --color-primary-light: #38bdf8;
    --color-primary-dark: #0369a1;
    --color-primary-glow: rgba(14, 165, 233, 0.2);
    --color-background: #f8fafc;
    --color-background-card: #ffffff;
    --color-background-muted: #f1f5f9;
    --color-text-primary: #111827;
    --color-text-secondary: #475569;
    --color-text-muted: #64748b;
    --color-border: #e2e8f0;
    --color-border-strong: #cbd5e1;
    --color-success: #22c55e;
    --color-warning: #eab308;
    --color-error: #ef4444;
    --color-info: #0ea5e9;
    --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-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --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);
  }
}

/* Animation keyframes */
@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); }
}
.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; }