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

/* =============================================================================
   Mini-ECD Design System
   Gebaseerd op ux-stylesheet.md (v2, UX-geoptimaliseerd)
   ============================================================================= */

:root {
  /* Basiskleuren */
  --color-bg: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-surface-secondary: #F1F5F9;
  --color-text: #0F172A;
  --color-text-secondary: #475569;
  --color-border: #E2E8F0;

  /* Brand & Primary (Teal-first Design System) */
  --color-brand: #0F766E;      /* teal-700 - PRIMARY (5.47:1 on white - WCAG AA) */
  --color-brand-hover: #115E59;  /* teal-800 */
  --color-brand-active: #0D9488; /* teal-600 */
  --color-brand-subtle: #F0FDFA; /* teal-50 */

  /* AI Features (Amber) */
  --color-ai: #D97706;         /* amber-600 - PRIMARY AI (3.19:1 on white - WCAG AA large) */
  --color-ai-hover: #B45309;   /* amber-700 */
  --color-ai-subtle: #FFFBEB;  /* amber-50 */

  /* Neutral CTA */
  --color-neutral: #334155;
  --color-neutral-hover: #1F2937;

  /* Module-accenten */
  --color-module-appointments: #16A34A;
  --color-module-appointments-bg: #E8F8EF;
  --color-module-appointments-border: #CDECDC;

  --color-module-meds: #F59E0B;
  --color-module-meds-bg: #FEF6DC;
  --color-module-meds-border: #F6E7B6;

  --color-module-labs: #F97316;
  --color-module-labs-bg: #FFEBDC;
  --color-module-labs-border: #FFD2B8;

  /* Status & Feedback */
  --color-success: #16A34A;
  --color-success-subtle: #ECFDF5;
  --color-warning: #EAB308;
  --color-warning-subtle: #FEFCE8;
  --color-error: #DC2626;
  --color-error-subtle: #FEF2F2;
  --color-info: #0F766E;      /* teal-700 - Brand consistency (WCAG AA) */
  --color-info-subtle: #CCFBF1; /* teal-100 */

  /* Badges (Severity DSM-light) */
  --color-badge-low-bg: #E5E7EB;
  --color-badge-low-text: #374151;
  --color-badge-medium-bg: #FEF3C7;
  --color-badge-medium-text: #92400E;
  --color-badge-high-bg: #FEE2E2;
  --color-badge-high-text: #991B1B;

  /* Formulieren */
  --color-input-bg: #FFFFFF;
  --color-input-text: #0F172A;
  --color-input-placeholder: #94A3B8;
  --color-input-border: #CBD5E1;
  --color-input-border-hover: #94A3B8;
  --color-input-focus: #0F766E;      /* teal-700 - Focus states (WCAG AA) */
  --color-input-focus-border: #115E59; /* teal-800 */
  --color-input-disabled-bg: #F1F5F9;
  --color-input-disabled-text: #94A3B8;
  --color-input-invalid-border: #DC2626;
  --color-input-invalid-text: #B91C1C;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 2px 6px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 8px 20px rgba(15, 23, 42, 0.10);

  /* Fonts (injected by Next.js font loader) */
  /* --font-serif, --font-sans, --font-mono are available via className in layout.tsx */
  
  /* Typography Scale (Manifesto) */
  --text-hero: clamp(2.5rem, 6vw, 4rem);      /* Quote */
  --text-h1: clamp(2rem, 5vw, 3rem);          /* Section headings */
  --text-h2: clamp(1.5rem, 4vw, 2.5rem);     /* Subsections */
  --text-body: 1.25rem;                       /* Content */
  --text-small: 0.875rem;                     /* Metadata */
  --line-height-tight: 1.2;                   /* Headings */
  --line-height-relaxed: 1.8;                  /* Body */
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.129 0.042 264.695);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.129 0.042 264.695);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.129 0.042 264.695);
  --primary: oklch(0.208 0.042 265.755);
  --primary-foreground: oklch(0.984 0.003 247.858);
  --secondary: oklch(0.968 0.007 247.896);
  --secondary-foreground: oklch(0.208 0.042 265.755);
  --muted: oklch(0.968 0.007 247.896);
  --muted-foreground: oklch(0.554 0.046 257.417);
  --accent: oklch(0.968 0.007 247.896);
  --accent-foreground: oklch(0.208 0.042 265.755);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.929 0.013 255.508);
  --input: oklch(0.929 0.013 255.508);
  --ring: oklch(0.704 0.04 256.788);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.984 0.003 247.858);
  --sidebar-foreground: oklch(0.129 0.042 264.695);
  --sidebar-primary: oklch(0.208 0.042 265.755);
  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
  --sidebar-accent: oklch(0.968 0.007 247.896);
  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
  --sidebar-border: oklch(0.929 0.013 255.508);
  --sidebar-ring: oklch(0.704 0.04 256.788);
}

/* Dark mode (optioneel, MVP gebruikt licht thema) */
.dark {
  --color-bg: #0a0a0a;
  --color-surface: #1a1a1a;
  --color-text: #ededed;
  --color-text-secondary: #a1a1a1;
  --color-border: #333333;

  --background: oklch(0.129 0.042 264.695);
  --foreground: oklch(0.984 0.003 247.858);
  --card: oklch(0.208 0.042 265.755);
  --card-foreground: oklch(0.984 0.003 247.858);
  --popover: oklch(0.208 0.042 265.755);
  --popover-foreground: oklch(0.984 0.003 247.858);
  --primary: oklch(0.929 0.013 255.508);
  --primary-foreground: oklch(0.208 0.042 265.755);
  --secondary: oklch(0.279 0.041 260.031);
  --secondary-foreground: oklch(0.984 0.003 247.858);
  --muted: oklch(0.279 0.041 260.031);
  --muted-foreground: oklch(0.704 0.04 256.788);
  --accent: oklch(0.279 0.041 260.031);
  --accent-foreground: oklch(0.984 0.003 247.858);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.551 0.027 264.364);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.208 0.042 265.755);
  --sidebar-foreground: oklch(0.984 0.003 247.858);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
  --sidebar-accent: oklch(0.279 0.041 260.031);
  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.551 0.027 264.364);
}

/* Global styles */
body {
  font-family: var(--font-sans), system-ui, -apple-system, sans-serif;
}

/* Typography utilities voor manifesto */
.font-serif {
  font-family: var(--font-serif), Georgia, serif;
}

.font-sans {
  font-family: var(--font-sans), system-ui, -apple-system, sans-serif;
}

.font-mono {
  font-family: var(--font-mono), 'Courier New', monospace;
}

/* Focus styles (toegankelijkheid) - WCAG AA compliant */
*:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  outline-width: 2px;
}

/* Skip to main content link (toegankelijkheid) */
.skip-to-main {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1rem;
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
}

.skip-to-main:focus {
  left: 50%;
  transform: translateX(-50%);
  top: 1rem;
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* Reduced motion support */
@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;
  }
}

/* AI source highlighting (gebruikt in Intake editor) */
.ai-source-highlight {
  background-color: #fef08a; /* lichtgeel */
  border-radius: 2px;
  padding: 1px 0;
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground antialiased;
  }
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}



@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}