:root {
  /* Color Palette - Warm Light Theme (Editorial Design v2.1)
     Inspired by archival/manuscript aesthetic with warm tones */

  /* Backgrounds - Warm cream/beige tones */
  --bg-primary: #faf8f5;          /* Warm off-white */
  --bg-secondary: #ffffff;         /* Pure white for panels */
  --bg-tertiary: #f5f2ed;          /* Warm light gray */
  --bg-tertiary-hover: #ebe7e0;
  --bg-rgb: 250, 248, 245;
  --bg-viewer: #f0ebe3;            /* Warm paper-like background for viewer */

  /* Text - Warm browns instead of cold blacks */
  --text-primary: #3d3229;         /* Dark warm brown */
  --text-secondary: #8a7e72;       /* Medium warm gray-brown */

  /* Brand - Logo colors (identity, distinct from functional colors) */
  --brand-gold: #b89850;           /* Logo gold - warm ochre */
  --brand-gold-rgb: 184, 152, 80;
  --brand-brown: #3d3229;          /* Logo brown - matches text-primary */

  /* Accent - Warm blue (slightly desaturated, for interactive elements) */
  --accent-primary: #4a7c9b;       /* Muted steel blue */
  --accent-rgb: 74, 124, 155;
  --accent-secondary: #3a6a87;

  /* Region colors - Warmer sienna/brown for default boxes */
  --region-stroke: #8b7355;        /* Warm sienna brown */
  --region-stroke-hover: #6d5a45;  /* Darker sienna */
  --region-fill-hover: rgba(139, 115, 85, 0.1);

  /* Status Colors - Muted, archival palette */
  --confident: #5a8a5a;            /* Muted forest green */
  --confident-rgb: 90, 138, 90;
  --uncertain: #c4973a;            /* Warm amber/gold */
  --uncertain-rgb: 196, 151, 58;
  --problematic: #b85c4a;          /* Muted terracotta red */
  --problematic-rgb: 184, 92, 74;

  /* Legacy aliases for compatibility */
  --success: var(--confident);
  --success-rgb: 90, 138, 90;
  --warning: var(--uncertain);
  --warning-rgb: 196, 151, 58;
  --error: var(--problematic);
  --error-rgb: 184, 92, 74;
  --selection: #e8c547;            /* Golden yellow for selection */
  --selection-rgb: 232, 197, 71;
  --selection-bg: rgba(232, 197, 71, 0.15);
  --selection-bg-hover: rgba(232, 197, 71, 0.3);
  --selection-bg-active: rgba(232, 197, 71, 0.2);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, "Courier New", monospace;

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */

  /* Spacing */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-medium: 300ms ease;

  /* Layers / Z-Index (systematic) */
  --z-dropdown: 100;
  --z-sticky: 150;
  --z-overlay: 200;
  --z-modal: 300;
  --z-dialog: 300;
  --z-tooltip: 400;
  --z-toast: 500;

  /* Focus Ring */
  --focus-ring-color: var(--accent-primary);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* Borders - Warm, subtle */
  --border-subtle: rgba(61, 50, 41, 0.04);
  --border-muted: rgba(61, 50, 41, 0.08);
  --border-default: rgba(61, 50, 41, 0.12);
  --border-emphasis: rgba(61, 50, 41, 0.2);

  /* Surface overlays (for hover, backgrounds) */
  --surface-hover: rgba(61, 50, 41, 0.03);
  --surface-active: rgba(61, 50, 41, 0.06);
  --surface-selected: rgba(61, 50, 41, 0.09);

  /* Accent overlays */
  --accent-hover: rgba(74, 124, 155, 0.08);
  --accent-active: rgba(74, 124, 155, 0.12);
  --accent-muted: rgba(74, 124, 155, 0.04);

  /* Brand overlays */
  --brand-bg: rgba(184, 152, 80, 0.08);
  --brand-border: rgba(184, 152, 80, 0.25);
  --brand-glow: 0 0 12px rgba(184, 152, 80, 0.2);

  /* Status overlays */
  --confident-bg: rgba(90, 138, 90, 0.1);
  --confident-border: rgba(90, 138, 90, 0.3);
  --confident-glow: 0 0 8px rgba(90, 138, 90, 0.15);
  --uncertain-bg: rgba(196, 151, 58, 0.1);
  --uncertain-border: rgba(196, 151, 58, 0.3);
  --uncertain-glow: 0 0 8px rgba(196, 151, 58, 0.15);
  --problematic-bg: rgba(184, 92, 74, 0.1);
  --problematic-border: rgba(184, 92, 74, 0.3);
  --problematic-glow: 0 0 8px rgba(184, 92, 74, 0.15);

  /* AI-Generated Content - Distinct purple/violet for AI identification */
  --ai-primary: #7c5cbf;              /* Muted purple/violet */
  --ai-rgb: 124, 92, 191;
  --ai-secondary: #6a4fa8;
  --ai-bg: rgba(124, 92, 191, 0.08);
  --ai-border: rgba(124, 92, 191, 0.25);
  --ai-glow: 0 0 8px rgba(124, 92, 191, 0.15);

  /* Shadows - Very soft, warm */
  --shadow-sm: 0 1px 3px rgba(61, 50, 41, 0.06);
  --shadow-md: 0 4px 12px rgba(61, 50, 41, 0.08);
  --shadow-lg: 0 8px 24px rgba(61, 50, 41, 0.1);
  --shadow-xl: 0 16px 48px rgba(61, 50, 41, 0.12);

  /* Glass effect - Warm tint */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(61, 50, 41, 0.08);
}