/* CSS Custom Properties - Design System */
:root {
  /* ========================================
     COLORS - WCAG 2.1 AA Compliant
     Text: 4.5:1 contrast ratio
     UI Elements: 3:1 contrast ratio
     ======================================== */

  /* Primary palette */
  --primary: #5d4e3c;           /* 7.2:1 on light bg */
  --primary-hover: #4a3e30;
  --primary-light: #8b7355;
  --primary-bg: #f5efe8;

  /* Surfaces */
  --surface-1: #ffffff;
  --surface-2: #faf8f5;
  --surface-3: #f5f0eb;
  --background: #f5f0eb;

  /* Text */
  --text: #1a1a1a;              /* 16:1 on light bg */
  --text-secondary: #4a4a4a;    /* 9:1 on light bg */
  --text-muted: #666666;        /* 5.7:1 on light bg */

  /* Borders */
  --border: #c5bdb3;            /* 3.2:1 contrast */
  --border-strong: #8b8279;

  /* Auxiliary verb colors - enhanced contrast */
  --hebben: #b5854a;            /* 3.5:1 on white */
  --hebben-text: #7a5a2e;       /* 5.5:1 on white */
  --hebben-bg: #fff8f0;
  --zijn: #4a7fa8;              /* 4.5:1 on white */
  --zijn-text: #3a6585;         /* 5.5:1 on white */
  --zijn-bg: #e8f4fc;

  /* Feedback colors - WCAG compliant */
  --correct: #1e6e22;           /* 7:1 on white */
  --correct-bg: #e8f5e9;
  --wrong: #c43e00;             /* 5:1 on white */
  --wrong-bg: #fff3e0;

  /* Focus ring - high visibility */
  --focus-ring: #2563eb;        /* Blue for clear visibility */
  --focus-ring-offset: 3px;

  /* Interactive states */
  --hover-overlay: rgba(93, 78, 60, 0.06);
  --active-overlay: rgba(93, 78, 60, 0.12);
  --selected-bg: rgba(93, 78, 60, 0.08);

  /* ========================================
     SPACING - 8px base unit
     ======================================== */
  --space-2xs: 0.25rem;   /* 4px */
  --space-xs: 0.5rem;     /* 8px */
  --space-sm: 0.75rem;    /* 12px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */

  /* ========================================
     TYPOGRAPHY - Fluid with clamp()
     ======================================== */
  --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --font-size-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --font-size-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
  --font-size-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
  --font-size-3xl: clamp(1.875rem, 1.5rem + 1.5vw, 3rem);

  --line-height-tight: 1.25;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.75;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ========================================
     BORDER RADIUS
     ======================================== */
  --radius-sm: 0.375rem;  /* 6px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.5rem;   /* 24px */
  --radius-full: 9999px;

  /* ========================================
     ANIMATION TOKENS
     ======================================== */
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Legacy transition helpers */
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-normal: var(--duration-normal) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);

  /* ========================================
     SHADOWS
     ======================================== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Colored shadows for cards */
  --shadow-card: 0 2px 8px rgba(93, 78, 60, 0.08);
  --shadow-card-hover: 0 8px 24px rgba(93, 78, 60, 0.12);

  /* ========================================
     BREAKPOINTS (as custom properties for JS)
     ======================================== */
  --bp-xs: 320px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* ========================================
     Z-INDEX SCALE
     ======================================== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-tooltip: 500;
  --z-skip-link: 1000;

  /* ========================================
     GRID LAYOUT TOKENS
     ======================================== */
  /* Page layout grid rows: header, progress, main, footer */
  --page-grid-rows: auto auto 1fr auto;

  /* Card grid configuration */
  --card-grid-min: 280px;
  --card-grid-gap: var(--space-lg);

  /* Subgrid for card content alignment */
  --card-content-rows: auto auto 1fr auto;

  /* Container widths */
  --container-sm: 480px;
  --container-md: 600px;
  --container-lg: 1400px;

  color-scheme: light dark;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    /* Primary */
    --primary: #d4b896;
    --primary-hover: #e5cdb0;
    --primary-light: #a69070;
    --primary-bg: #2a2520;

    /* Surfaces */
    --surface-1: #1e1c1a;
    --surface-2: #252320;
    --surface-3: #2d2a27;
    --background: #141312;

    /* Text */
    --text: #f5f0eb;
    --text-secondary: #c5c0ba;
    --text-muted: #9a958f;

    /* Borders */
    --border: #3d3935;
    --border-strong: #5a5550;

    /* Auxiliary colors */
    --hebben: #d4a574;
    --hebben-text: #e5c4a0;
    --hebben-bg: #2a2015;
    --zijn: #7ba3c7;
    --zijn-text: #a0c5e0;
    --zijn-bg: #152025;

    /* Feedback */
    --correct: #4caf50;
    --correct-bg: #1a2a1a;
    --wrong: #ff7043;
    --wrong-bg: #2a1a15;

    /* Focus ring */
    --focus-ring: #60a5fa;

    /* Interactive states */
    --hover-overlay: rgba(212, 184, 150, 0.08);
    --active-overlay: rgba(212, 184, 150, 0.12);
    --selected-bg: rgba(212, 184, 150, 0.1);

    /* Shadows - lighter for dark mode */
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
}

/* CSS Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--background);
  color: var(--text);
}

/* Focus styles - WCAG compliant with 3:1 contrast */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Remove default focus for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  :root {
    --primary: #000000;
    --primary-hover: #1a1a1a;
    --text: #000000;
    --text-secondary: #1a1a1a;
    --text-muted: #333333;
    --border: #000000;
    --border-strong: #000000;
    --focus-ring: #0000ff;
    --hebben: #8b4513;
    --zijn: #00008b;
    --correct: #006400;
    --wrong: #8b0000;
  }
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --primary: #ffffff;
    --primary-hover: #e5e5e5;
    --text: #ffffff;
    --text-secondary: #e5e5e5;
    --text-muted: #cccccc;
    --border: #ffffff;
    --border-strong: #ffffff;
    --focus-ring: #00bfff;
    --hebben: #ffa500;
    --zijn: #87ceeb;
    --correct: #00ff00;
    --wrong: #ff6347;
  }
}

/* Button reset */
button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* Link reset */
a {
  color: inherit;
  text-decoration: none;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--surface-2);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ========================================
   VIEW TRANSITIONS
   ======================================== */

/* Enable view transitions for navigation */
@view-transition {
  navigation: auto;
}

/* Root transition (default cross-fade) */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--duration-normal, 250ms);
  animation-timing-function: var(--ease-out);
}

/* Page-specific transitions */
::view-transition-old(page-content),
::view-transition-new(page-content) {
  animation-duration: var(--duration-normal, 250ms);
  animation-timing-function: var(--ease-out);
}

/* Header stays stable during transition */
::view-transition-old(page-header),
::view-transition-new(page-header) {
  animation: none;
  mix-blend-mode: normal;
}

/* Card transitions for morphing between views */
::view-transition-old(verb-card),
::view-transition-new(verb-card) {
  animation-duration: var(--duration-slow, 400ms);
  animation-timing-function: var(--ease-out);
}

/* Slide-in from right for forward navigation */
@keyframes slide-in-from-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide-out to left for forward navigation */
@keyframes slide-out-to-left {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30px);
  }
}

/* Slide-in from left for back navigation */
@keyframes slide-in-from-left {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide-out to right for back navigation */
@keyframes slide-out-to-right {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(30px);
  }
}

/* Forward navigation animations */
.view-transition-forward::view-transition-old(page-content) {
  animation: slide-out-to-left var(--duration-normal) var(--ease-out) both;
}

.view-transition-forward::view-transition-new(page-content) {
  animation: slide-in-from-right var(--duration-normal) var(--ease-out) both;
}

/* Back navigation animations */
.view-transition-back::view-transition-old(page-content) {
  animation: slide-out-to-right var(--duration-normal) var(--ease-out) both;
}

.view-transition-back::view-transition-new(page-content) {
  animation: slide-in-from-left var(--duration-normal) var(--ease-out) both;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.01ms !important;
  }
}

/* Utility classes */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}