/* =================================================================
   Import Utility Classes - Must be at the top
   ================================================================= */
@import url('./utilities.css');

/* =================================================================
   Design Tokens - All CSS Variables
   ================================================================= */

:root {
  /* Terms Colors - Blue colors for terms functionality */
  --color-terms-500: #a5a0df;
  --color-terms-600: #859bff;
  --color-terms-700: #6271ff;
  --color-terms-800: #4a59e6;

  /* UI Element Colors */
  --color-menu-checkmark: var(--color-terms-600);  /* Default to terms color */

  /* Background Colors - Panel backgrounds */
  --color-bg-toolbar: #e8e1cd;  /* Also used for claims panel */
  --color-bg-spec: #f0dfdf;
  --color-bg-claims: var(--color-bg-toolbar);  /* Same beige as toolbar */
  --color-bg-terms: #d6d3ff;
  --color-bg-terms-toolbar: #e8e5ff;  /* Slightly lighter than terms panel for toolbar */
  --color-bg-main: #fff7e2;
  --color-bg-file-dropdown: #fffff4;  /* Calculated using spec delta pattern */
  
  /* Button Colors - Toolbar buttons */
  --color-btn-default: #f4f0e6;
  --color-btn-default-hover: #faf9f5;
  --color-btn-default-active: #fdfcfa;
  --color-btn-spec: #e0ced1;
  --color-btn-spec-hover: #d4b2d8;
  --color-btn-spec-active: rgba(255, 255, 255, 0.6);
  --color-btn-spec-hover-alpha: rgba(212, 178, 216, 0.33); /* #D4B2D855 equivalent */
  --color-btn-spec-hover-anim-light: rgba(212, 178, 216, 0.6);
  --color-btn-spec-hover-anim-dark: rgba(212, 178, 216, 1);
  --color-btn-terms: #c6c2f1;
  --color-btn-terms-hover: #b5b0e8;
  --color-btn-terms-active: var(--color-terms-500);

  /* Text Colors */
  --color-text-primary: #333333;
  --color-text-secondary: #4d4d4d;  /* Further darkened from #5a5a5a for WCAG AA compliance */
  --color-text-tertiary: #646464;  /* Darkened from #999999 for WCAG AA compliance on light backgrounds */
  --color-text-muted: #655f5a;  /* Further darkened from #6b6863 for WCAG AA compliance */
  --color-text-inverse: #ffffff;
  --color-text-button: #ffffff;
  
  /* Terms-related Colors (Blue) */
  --color-term-bg: rgba(133, 155, 255, 0.15);
  --color-term-bg-loading: rgba(133, 155, 255, 0.12);
  --color-term-border: rgba(133, 155, 255, 0.3);
  --color-term-border-loading: rgba(133, 155, 255, 0.25);
  --color-term-highlight-bg: rgba(133, 155, 255, 0.25); /* #859BFF40 equivalent */
  --color-term-highlight-bg-hover: rgba(133, 155, 255, 0.38); /* #859BFF60 equivalent */
  --color-term-highlight-border: #859BFF;
  --color-term-adding-selection: rgba(98, 113, 255, 0.4);
  --color-term-adding-hover: rgba(98, 113, 255, 0.1);
  --color-term-adding-cursor: #6271ff;
  
  /* Terms Panel Line Features */
  --color-terms-divider: rgba(133, 155, 255, 0.25);     /* Terms toolbar bottom divider */
  --color-terms-thread-line: rgba(133, 155, 255, 0.4);  /* Thread container lines (vertical/horizontal) */
  --color-terms-thread-hover: rgba(133, 155, 255, 0.25); /* Thread item hover background */

  /* Notification Modal Colors - Light mode (default/terms blue-based) */
  --color-notification-header-bg: #859bff;  /* Terms blue 600 for header */
  --color-notification-header-border: #c6c2f1;  /* Terms button color for border */
  --color-notification-body-bg: #ffffff;  /* White body background */
  --color-notification-text-primary: #ffffff;  /* White text on blue header */
  --color-notification-text-secondary: #374151;  /* Dark text on light body */
  --color-notification-text-emphasis: #4a59e6;  /* Terms blue 800 for emphasis text */
  --color-notification-close-btn: #e8e5ff;  /* Very light blue tint for close button */
  --color-notification-close-btn-hover: #ffffff;  /* White close button on hover */
  --color-notification-close-btn-bg-hover: rgba(255, 255, 255, 0.15);  /* Subtle background on hover */
  --color-notification-backdrop: rgba(0, 0, 0, 0.5);  /* Modal backdrop */
  
  /* Specification-related Colors (Pink/Lavender) */
  --color-spec-figure-bg: #fdf1f3;
  --color-spec-figure-bg-hover: #f8e5e8;
  --color-spec-figure-text: #7a5a7f;  /* Further darkened from #9a739f for WCAG AA compliance */
  --color-spec-boilerplate-bg: rgba(212, 84, 138, 0.06);
  --color-spec-boilerplate-border: rgba(212, 84, 138, 0.3);
  --color-spec-info-box-bg: var(--color-bg-spec);  /* Info box background matches spec panel */
  
  /* Inline comment colors */
  --color-spec-inline-comment-bg: rgba(212, 84, 138, 0.08);
  --color-spec-inline-comment-bg-hover: rgba(212, 84, 138, 0.12);
  --color-spec-inline-comment-bg-special: rgba(212, 84, 138, 0.1);
  --color-spec-inline-comment-border: rgba(212, 84, 138, 0.3);
  --color-spec-inline-comment-border-hover: rgba(212, 84, 138, 0.5);
  --color-spec-inline-comment-bg-dark: rgba(212, 84, 138, 0.15);
  --color-spec-inline-comment-bg-hover-dark: rgba(212, 84, 138, 0.2);
  --color-spec-inline-comment-border-dark: rgba(212, 84, 138, 0.4);
  --color-spec-inline-comment-border-hover-dark: rgba(212, 84, 138, 0.6);
  
  /* Spec Progress Bar Colors */
  --color-spec-progress-bg: rgba(255, 255, 255, 0.85);
  --color-spec-progress-bg-gradient-end: rgba(252, 252, 253, 0.85);
  --color-spec-progress-border: rgba(255, 146, 195, 0.15);
  --color-spec-progress-shadow: rgba(255, 146, 195, 0.08);
  --color-spec-progress-track: rgba(255, 146, 195, 0.12);
  --color-spec-progress-fill-start: rgba(255, 146, 195, 0.5);
  --color-spec-progress-fill-end: rgba(255, 146, 195, 0.7);
  --color-spec-progress-shimmer: rgba(255, 255, 255, 0.4);
  --color-spec-progress-steps: rgba(255, 146, 195, 0.9);
  --color-spec-progress-time: var(--color-text-secondary);
  --color-spec-progress-time-opacity: 0.7;

  /* Term Progress Bar Colors */
  --color-term-progress-bg: rgba(255, 255, 255, 0.85);
  --color-term-progress-bg-gradient-end: rgba(252, 252, 253, 0.85);
  --color-term-progress-border: rgba(100, 181, 246, 0.15);
  --color-term-progress-shadow: rgba(100, 181, 246, 0.08);
  --color-term-progress-track: rgba(100, 181, 246, 0.12);
  --color-term-progress-fill-start: rgba(100, 181, 246, 0.5);
  --color-term-progress-fill-end: rgba(100, 181, 246, 0.7);
  --color-term-progress-shimmer: rgba(255, 255, 255, 0.4);
  --color-term-progress-steps: rgba(100, 181, 246, 0.9);
  --color-term-progress-time: var(--color-text-secondary);
  --color-term-progress-time-opacity: 0.7;

  /* Semantic Colors */
  --color-error: #f44336;
  --color-error-hover: #ff5252;
  --shadow-error-focus: 0 0 0 2px rgba(255, 107, 107, 0.4);
  
  /* Ambiguous Term Error Colors (unified article errors and parent warnings) */
  --color-ambiguous-term-error: #ef4444;
  --color-ambiguous-term-error-bg: #fef5f5;  /* Red-50 - opaque background */
  --color-ambiguous-term-error-bg-hover: rgba(239, 68, 68, 0.15);
  --color-ambiguous-term-tooltip-bg: var(--color-ambiguous-term-error);
  --color-ambiguous-term-tooltip-text: var(--color-text-inverse);
  
  /* Legacy - kept for backwards compatibility if needed */
  --color-article-error: var(--color-ambiguous-term-error);
  
  /* Auto-scroll flash highlight colors */
  --color-flash-highlight: rgba(255, 215, 0, 0.5); /* Golden yellow flash */
  --color-flash-highlight-end: rgba(255, 215, 0, 0);
  --color-article-error-bg: var(--color-ambiguous-term-error-bg);
  --color-article-error-bg-hover: var(--color-ambiguous-term-error-bg-hover);
  --color-article-error-tooltip-bg: var(--color-ambiguous-term-tooltip-bg);
  --color-article-error-tooltip-text: var(--color-ambiguous-term-tooltip-text);
  
  /* Tooltip Colors - Light Mode */
  --color-tooltip-bg-error-light: #fff5f5;  /* Very light red background */
  --color-tooltip-text-error-light: #c53030;  /* Dark red text for contrast */
  --color-tooltip-border-error-light: #feb2b2;  /* Light red border */
  
  /* Claim Dependency Tooltip Colors - Light Mode */
  --color-tooltip-bg-warning-light: #fdf6e3;  /* Less saturated amber/cream background */
  --color-tooltip-text-warning: #b45309;  /* Amber-700 for good contrast */
  --color-tooltip-border-warning: #fbbf24;  /* Amber-400 border */
  --color-tooltip-text-warning-label: #92400e;  /* Darker amber for labels */
  
  /* Parent Term Warning Colors */
  --color-parent-warning: #1e40af;
  --color-parent-warning-bg: rgba(30, 64, 175, 0.1);
  --color-parent-warning-bg-hover: rgba(30, 64, 175, 0.15);
  --color-parent-warning-tooltip-bg: #1e40af;
  --color-parent-warning-tooltip-text: #ffffff;
  
  /* Neutral Colors */
  --color-white: #ffffff;
  --color-gray-200: #eeeeee;
  --color-gray-300: #e0e0e0;
  --color-gray-400: #bdbdbd;
  
  /* Overlay Colors */
  --color-overlay-light: rgba(255, 255, 255, 0.9);
  --color-backdrop: rgba(0, 0, 0, 0.3);
  
  /* Surface Colors - For modals, floating panels, popovers, etc. */
  
  /* Context-aware surface colors */

  /* Neutral variant - warm beige like claims */
  --color-surface-header-neutral: #dfd8c4;  /* Slightly darker beige for header */
  --color-surface-content-neutral: #f5f1e8;  /* Light warm beige for content */
  
  /* Spec variant (pink-lavender) */
  --color-surface-header-spec: #f5ebe9;
  --color-surface-content-spec: #f5ebe9;
  --color-surface-panel-spec-frosted: rgba(245, 235, 233, 0.85); /* Frosted spec panel - 85% opacity */
  --color-surface-header-spec-frosted: rgba(245, 235, 233, 0.95); /* Frosted spec header - 95% opacity */
  --color-spec-border: rgba(183, 147, 188, 0.3); /* Spec lavender border */
  
  /* Terms variant (blue tones) */
  --color-surface-header-terms: #e8ebff;
  --color-surface-content-terms: #f5f7ff;
  
  /* Claims variant (beige tones) */
  --color-surface-header-claims: #e8e1cd;  /* Match claims editor exactly */
  --color-surface-content-claims: #f5f1e8;  /* Light warm beige */
  
  /* Dialog specific colors */
  --color-dialog-header-terms: rgb(130, 142, 235);  /* Terms dialog header */
  --color-dialog-bg-warning: rgb(255, 251, 230);    /* Warning/notice background */
  --color-dialog-preview-bg: rgb(245, 247, 255);    /* Preview background */
  --color-dialog-btn-confirm: rgb(130, 142, 235);   /* Confirm button (same as header) */
  --color-dialog-btn-confirm-hover: rgb(110, 122, 220); /* Confirm button hover */
  --color-dialog-btn-cancel: rgb(233, 231, 227);    /* Cancel button */
  --color-dialog-btn-cancel-hover: rgb(220, 218, 214); /* Cancel button hover */
  
  /* Collaboration colors (Comments & Version Changes) - Gray-blue theme */
  --color-collab-header: #E8ECEE;        /* Light gray-blue header */
  --color-collab-border: #7A8891;        /* Medium gray-blue border */
  --color-collab-badge: #C5CDD1;         /* Light gray-blue badge */
  --color-collab-text: #48545B;          /* Dark gray-blue text (base color) */
  --color-collab-hover: #DDE3E6;         /* Light hover state */
  --color-collab-light: #E8ECEE;         /* Light background */
  
  /* Collaboration surface colors */
  --color-surface-header-collab: #E8ECEE;     /* Light gray-blue */
  --color-surface-content-collab: #F5F7F8;    /* Very light gray-blue tint */
  --color-surface-panel-collab: #F8FAFB;      /* Near white with blue-gray tint */
  --color-surface-panel-collab-frosted: rgba(248, 250, 251, 0.6); /* Frosted glass - 60% opacity */
  --color-surface-header-collab-frosted: rgba(232, 236, 238, 0.8); /* Frosted header - 80% opacity */
  
  /* Collaboration diff content colors */
  --color-collab-added-bg: rgba(72, 187, 120, 0.15);
  --color-collab-added-text: #22863a;
  --color-collab-removed-bg: rgba(245, 101, 101, 0.15);
  --color-collab-removed-text: #cb2431;
  --color-collab-modified-bg: rgba(255, 193, 7, 0.1);
  --color-collab-modified-text: #856404;
  --color-collab-modified-border: rgba(255, 193, 7, 0.3);
  
  /* Comments panel - Aliases for backward compatibility */
  --color-comments-header: var(--color-collab-header);
  --color-comments-border: var(--color-collab-border);
  --color-comments-badge: var(--color-collab-badge);
  --color-comments-text: var(--color-collab-text);
  --color-comments-hover: var(--color-collab-hover);
  --color-comments-light: var(--color-collab-light);
  --color-surface-header-comments: var(--color-surface-header-collab);
  --color-surface-content-comments: var(--color-surface-content-collab);
  --color-surface-panel-comments: var(--color-surface-panel-collab);
  --color-surface-panel-comments-frosted: var(--color-surface-panel-collab-frosted);
  --color-surface-header-comments-frosted: var(--color-surface-header-collab-frosted);

  /* Base spacing unit: 4px */
  --spacing-base: 4px;
  
  /* Spacing scale */
  --spacing-0: 0;
  --spacing-1: 0.25rem;  /* 4px */
  --spacing-2: 0.5rem;   /* 8px */
  --spacing-3: 0.75rem;  /* 12px */
  --spacing-4: 1rem;     /* 16px */
  --spacing-5: 1.25rem;  /* 20px */
  --spacing-6: 1.5rem;   /* 24px */
  --spacing-7: 1.75rem;  /* 28px */
  --spacing-8: 2rem;     /* 32px */
  --spacing-9: 2.25rem;  /* 36px */
  --spacing-10: 2.5rem;  /* 40px */
  --spacing-12: 3rem;    /* 48px */
  --spacing-16: 4rem;    /* 64px */
  --spacing-20: 5rem;    /* 80px */
  --spacing-24: 6rem;    /* 96px */
  
  /* Viewport constraints - Minimum supported screen size (13" laptop) */
  --viewport-min-width: 1366px;
  --viewport-min-height: 768px;
  --viewport-max-width: 2560px; /* Maximum content width for high-end 24" displays */
  --viewport-max-height: 1440px; /* Maximum content height for high-end 24" displays */
  
  /* Padding presets */
  --padding-button: var(--spacing-2) var(--spacing-4);
  --padding-button-sm: var(--spacing-1) var(--spacing-3);
  --padding-button-lg: var(--spacing-3) var(--spacing-6);
  --padding-input: var(--spacing-2) var(--spacing-3);
  --padding-card: var(--spacing-4);
  --padding-section: var(--spacing-6);
  --padding-modal: var(--spacing-6);
  
  /* Margin presets */
  --margin-stack-xs: 0 0 var(--spacing-2) 0;
  --margin-stack-sm: 0 0 var(--spacing-3) 0;
  --margin-stack-md: 0 0 var(--spacing-4) 0;
  --margin-stack-lg: 0 0 var(--spacing-6) 0;
  --margin-stack-xl: 0 0 var(--spacing-8) 0;
  
  /* Gap presets removed - use spacing values directly */

  /* Font families */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-family-mono: "Source Code Pro", "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  
  /* Font sizes */
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem;  /* 36px */
  --font-size-5xl: 3rem;     /* 48px */
  
  /* Line heights */
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  
  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Letter spacing */
  --letter-spacing-normal: 0;

  /* Shadow tokens */
  --shadow-none: none;
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --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-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Component-specific shadows */
  --shadow-button: var(--shadow-sm);
  --shadow-button-hover: var(--shadow-md);
  --shadow-card: var(--shadow-sm);
  --shadow-dropdown: var(--shadow-lg);
  --shadow-modal: var(--shadow-xl);
  --shadow-tooltip: var(--shadow-md);
  --shadow-popover: var(--shadow-lg);
  --shadow-inset-xs: inset 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-inset-sm: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-inset-md: inset 0 1px 3px rgba(0, 0, 0, 0.12);
  
  /* Focus shadows */
  --shadow-focus-spec: 0 0 0 3px rgba(183, 147, 188, 0.5);  /* Pink-lavender focus for spec-related */
  --shadow-focus-terms: 0 0 0 3px rgba(133, 155, 255, 0.5);  /* Blue focus for terms-related */
  
  /* Terms-specific shadows */
  --shadow-terms-sm: 0 2px 4px rgba(133, 155, 255, 0.2);
  --shadow-terms-md: 0 3px 5px rgba(133, 155, 255, 0.3);
  --shadow-terms-selected: 0 0 0 2px rgba(133, 155, 255, 0.3), 0 2px 4px rgba(133, 155, 255, 0.2);
  --shadow-terms-button-active: 0 0 0 2px rgba(198, 194, 241, 0.3);

  /* Z-index scale */
  --z-index-negative: -1;
  --z-index-0: 0;
  --z-index-10: 10;
  --z-index-20: 20;
  --z-index-30: 30;
  --z-index-40: 40;
  --z-index-50: 50;
  
  /* Component-specific z-index */
  --z-index-dropdown: 100;
  --z-index-sticky: 200;
  --z-index-fixed: 300;
  --z-index-floating-panel: 350;
  --z-index-modal-backdrop: 400;
  --z-index-modal: 500;
  --z-index-popover: 600;
  --z-index-tooltip: 700;
  --z-index-notification: 800;
  --z-index-overlay: 900;
  --z-index-debug: 999;
  --z-index-high-priority-modal: 1100;
  --z-index-system-overlay: 9999;

  /* Border widths */
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-3: 3px;
  --border-width-4: 4px;
  --border-width-5: 5px;
  
  /* Border radius */
  --border-radius-none: 0;
  --border-radius-sm: 0.125rem;   /* 2px */
  --border-radius-md: 0.25rem;    /* 4px */
  --border-radius-lg: 0.5rem;     /* 8px */
  --border-radius-xl: 0.75rem;    /* 12px */
  --border-radius-2xl: 1rem;      /* 16px */
  --border-radius-3xl: 1.5rem;    /* 24px */
  --border-radius-full: 9999px;
  
  /* Component-specific radius */
  --border-radius-modal: var(--border-radius-xl);
  --border-radius-pill: var(--border-radius-full);
  
  /* Border colors */
  --border-color-default: rgba(0, 0, 0, 0.1);
  --border-color-light: rgba(0, 0, 0, 0.05);
  --border-color-dark: rgba(0, 0, 0, 0.2);
  --border-color-focus: var(--color-terms-600);
  --border-color-error: var(--color-error);
  
  /* Border styles */
  --border-default: var(--border-width-1) solid var(--border-color-default);
  --border-light: var(--border-width-1) solid var(--border-color-light);
  --border-dark: var(--border-width-1) solid var(--border-color-dark);

  /* Timing functions */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Durations */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  
  /* Component-specific transitions */
  --transition-colors: color var(--duration-fast) var(--ease-in-out),
                      background-color var(--duration-fast) var(--ease-in-out),
                      border-color var(--duration-fast) var(--ease-in-out);
  
  --transition-opacity: opacity var(--duration-normal) var(--ease-in-out);
  
  --transition-transform: transform var(--duration-normal) var(--ease-out);
  
  --transition-shadow: box-shadow var(--duration-normal) var(--ease-in-out);
  
  --transition-all: all var(--duration-normal) var(--ease-in-out);
  
  /* Button transitions */
  --transition-button: var(--transition-colors), var(--transition-shadow), var(--transition-transform);
  
  /* Modal transitions */
  --transition-modal: opacity var(--duration-normal) var(--ease-in-out),
                     transform var(--duration-normal) var(--ease-out);
  
  /* Dropdown transitions */
  --transition-dropdown: opacity var(--duration-fast) var(--ease-in-out),
                        transform var(--duration-fast) var(--ease-out);
  
  /* Opacity values */
  --opacity-disabled: 0.5;
  --opacity-deselected: 0.7;
  
  /* Panel background colors with opacity scale */
  --color-bg-panel-20: rgba(232, 221, 215, 0.7);
  --color-bg-panel-30: rgba(232, 221, 215, 0.85);
  --color-bg-panel-50: rgba(232, 221, 215, 0.95);
  --color-bg-panel-80: rgba(232, 221, 215, 0.98);
  
  /* CodeMirror active line emphasis */
  --color-cm-active-line: rgba(186, 174, 142, 0.15);  /* Warm beige for claims editor active line */
  --color-cm-active-line-gutter: rgba(186, 174, 142, 0.15);  /* Same for gutter */
  
  /* Accent background colors with opacity scale */
  --color-bg-accent-20: rgba(212, 178, 216, 0.2);
  --color-bg-accent-30: rgba(212, 178, 216, 0.3);
  --color-bg-accent-50: rgba(212, 178, 216, 0.5);
  --color-bg-accent-80: rgba(212, 178, 216, 0.8);
  --color-bg-accent-100: rgba(212, 178, 216, 1);
  --color-bg-input: rgba(255, 255, 255, 0.8);
  --color-bg-interactive-hover: rgba(255, 255, 255, 0.9);
  --color-bg-hover-light: rgba(255, 255, 255, 0.7);
  --color-bg-button-primary: rgba(212, 178, 216, 0.9);
  --color-bg-button-primary-hover: rgba(212, 178, 216, 1);
  
  /* Standardized button colors - Light theme (purple accent) */
  --color-button-accent-bg: rgba(212, 178, 216, 0.9);  /* Purple for primary actions */
  --color-button-accent-bg-hover: rgba(212, 178, 216, 1);
  --color-button-accent-text: var(--color-text-primary);
  
  --color-button-secondary-bg: #6c757d;  /* Gray for secondary actions */
  --color-button-secondary-bg-hover: #5a6268;
  --color-button-secondary-text: white;
  
  --color-button-danger-bg: #dc3545;  /* Red for destructive actions */
  --color-button-danger-bg-hover: #c82333;
  --color-button-danger-text: white;
  
  /* Additional text and accent colors */
  --color-error-text: #d93025;
  --color-error-bg: #fee;
  --color-error-bg-hover: #fdd;
  --color-error-bg-selected: #fcc;
  --color-error-border: #faa;
  --color-error-border-hover: #f99;
  --color-tooltip-bg-subtle: #4D4A43;
  --color-tooltip-text-error: #ff8b8b;
  
  /* Validation error colors */
  --color-warning: #f59e0b;
  --color-validation-error-bg: rgba(239, 68, 68, 0.05);
  --color-validation-error-bg-hover: rgba(239, 68, 68, 0.08);
  --color-validation-error-text: var(--color-text-primary);
  --color-validation-warning-bg: rgba(245, 158, 11, 0.05);
  --color-validation-warning-bg-hover: rgba(245, 158, 11, 0.08);
  --color-validation-warning-text: var(--color-text-primary);
  
  /* Claim Dependency Tooltip Colors - Dark Mode */
  --color-tooltip-text-warning-dark: #fbbf24;  /* Amber-400 for dark mode */
  --color-tooltip-text-warning-label-dark: #fde68a;  /* Lighter amber for labels */
  --color-spec-figure-text-hover: #a57faa;
  --color-spec-figure-text-hover-dark: #9A4C95;
  --color-progress-stripe: rgba(255, 255, 255, 0.15);
  
  /* Panel title colors - distinguishing each panel */
  --color-panel-title-claims: var(--color-text-muted);  /* Muted beige - now uses further darkened value */
  --color-panel-title-spec: var(--color-spec-figure-text);  /* Purple - now uses darkened value */
  --color-panel-title-terms: #3456b0;  /* Final adjustment for WCAG AA compliance (4.5:1) */
  
  /* Patent keyword highlighting */
  --color-patent-keyword: #7A5F37;  /* Brown for light theme */
  
  /* Search highlighting colors */
  --color-search-highlight-bg: rgba(255, 227, 69, 0.5);
  --color-search-highlight-border: rgba(255, 169, 69, 0.5);
  --color-search-highlight-current-bg: rgba(255, 169, 69, 0.7);
  --color-search-highlight-current-border: rgba(255, 140, 0, 0.8);
  --color-search-highlight-current-shadow: rgba(255, 140, 0, 0.4);
  
  /* Additional spacing and sizes */
  --spacing-0-75: 3px;
  --padding-button-xs: 0.3rem 0.6rem;
  --font-size-xs-plus: 13px;
  --size-element-number: 26px;
  --height-panel-min: 250px;
  --width-label-min: 80px;
  --height-progress-bar: 20px;
  --size-progress-stripe: 20px;
  
  /* Surface colors now use variant-specific variables only */
  
  /* Context-aware notification bubble colors */

  /* Spec variant (pink/lavender) - for specification-related notifications */
  --color-bubble-bg-spec: #f2d4e0;  /* Softer pink using same hue as element-spec-3 */
  --color-bubble-text-spec: #6b4c57;  /* Darker pink-brown text for contrast */
  --color-bubble-arrow-spec: #f2d4e0;
  
  /* Terms variant (blue) - for terms-related notifications */
  --color-bubble-bg-terms: var(--color-terms-700);
  --color-bubble-text-terms: var(--color-text-inverse);
  --color-bubble-arrow-terms: var(--color-terms-700);
  
  /* Error variant (red) - for error messages */
  --color-bubble-bg-error: var(--color-error);
  --color-bubble-text-error: var(--color-text-inverse);
  --color-bubble-arrow-error: var(--color-error);
  
  /* Neutral variant (gray) - for general information */
  --color-bubble-bg-neutral: var(--color-text-secondary);
  --color-bubble-text-neutral: var(--color-text-inverse);
  --color-bubble-arrow-neutral: var(--color-text-secondary);
  
  /* Success variant (cream) - for success messages */
  --color-bubble-bg-success: rgba(255, 247, 226, 0.98); /* More opaque version of main bg */
  --color-bubble-text-success: var(--color-text-primary);
  --color-bubble-arrow-success: rgba(255, 247, 226, 0.98);
  
  /* Scrollbar colors - matching spec editor */
  --color-scrollbar-track: transparent;
  --color-scrollbar-thumb: rgba(183, 147, 188, 0.2);  /* Light lavender like spec editor */
  --color-scrollbar-thumb-border: transparent;  /* No border for cleaner look */
  --color-scrollbar-thumb-hover: rgba(183, 147, 188, 0.4);  /* Slightly darker on hover */
  
  /* Editor-specific scrollbar colors */
  --color-scrollbar-claims-thumb: rgba(186, 174, 142, 0.2);  /* Warm beige matching claims panel */
  --color-scrollbar-claims-thumb-hover: rgba(186, 174, 142, 0.4);
  --color-scrollbar-terms-thumb: rgba(127, 151, 248, 0.2);  /* Light blue matching terms panel */
  --color-scrollbar-terms-thumb-hover: rgba(127, 151, 248, 0.4);
  --color-scrollbar-spec-thumb: rgba(183, 147, 188, 0.2);  /* Lavender matching spec panel */
  --color-scrollbar-spec-thumb-hover: rgba(183, 147, 188, 0.4);
  
  /* Panel hierarchy colors */
  --color-panel-primary-bg: #fdfbf8;    /* Soft warm beige instead of white */
  --color-panel-secondary-bg: #faf6f7;  /* Very light pink tint */
  --color-panel-tertiary-bg: #f5ebe9;   /* Light lavender-pink like spec bg */
  
  /* Interactive state colors */
  --color-interactive-default: #f0e6e8;  /* Light pink-gray */
  --color-interactive-hover: #e8dce0;    /* Slightly darker pink-gray */
  --color-interactive-disabled: rgba(212, 84, 138, 0.05);
  
  /* Input colors */
  --color-input-bg: #fdfbf8;             /* Soft warm beige */
  --color-input-bg-focus: #fffdfb;       /* Slightly brighter on focus */
  --color-input-bg-floating: rgba(255, 251, 248, 0.8); /* Semi-transparent for floating panels */
  
  /* Status colors - harmonized with theme */
  --color-status-success: #7c9982;      /* Muted sage green */
  --color-status-success-hover: #239a3b; /* Brighter green for hover */
  
  /* Toggle/Switch colors */
  --color-toggle-off: #b8b8b8;          /* Gray for off state */
  --color-toggle-on: #7c9982;           /* Same as success - sage green */
  --color-toggle-on-hover: #6b8771;     /* Darker sage for hover */
  
  /* Action colors */
  --color-action-primary: var(--color-spec-figure-text);        /* Lavender-pink */
  --color-action-primary-hover: var(--color-spec-figure-text-hover);  /* Darker lavender */
  --color-action-secondary: #9b8a9d;      /* Muted purple-gray */
  --color-action-secondary-hover: #877689;
  --color-action-danger: var(--color-error);
  
  /* Element categorization colors - aligned with spec (pink) and terms (blue) */
  --color-element-spec-1: var(--color-spec-figure-text);  /* Primary lavender */
  --color-element-spec-2: #d4548a;  /* Rose pink */
  --color-element-spec-3: #e89bb5;  /* Soft pink */
  --color-element-terms-1: var(--color-terms-600);  /* Primary blue */
  --color-element-terms-2: var(--color-terms-700);  /* Deeper blue */
  --color-element-bg-spec-1: rgba(183, 147, 188, 0.15);
  --color-element-bg-spec-2: rgba(212, 84, 138, 0.15);
  --color-element-bg-spec-3: rgba(232, 155, 181, 0.15);
  --color-element-bg-terms-1: var(--color-term-bg);
  --color-element-bg-terms-2: rgba(98, 113, 255, 0.15);

  /* =================================================================
     Claims Assignment Modal Color Variables - Light Theme
     ================================================================= */
  
  /* Panel backgrounds - harmonious light theme colors */
  --color-claims-modal-panel-primary: var(--color-panel-primary-bg);
  --color-claims-modal-panel-secondary: var(--color-panel-secondary-bg);
  --color-claims-modal-panel-tertiary: var(--color-panel-tertiary-bg);
  
  /* Interactive elements - using existing light theme patterns */
  --color-claims-modal-interactive-default: var(--color-interactive-default);
  --color-claims-modal-interactive-hover: var(--color-interactive-hover);
  --color-claims-modal-interactive-disabled: var(--color-interactive-disabled);
  
  /* Input fields - clean light theme */
  --color-claims-modal-input-bg: var(--color-input-bg);
  --color-claims-modal-input-bg-focus: var(--color-input-bg-focus);
  
  /* Limitation group headers - maintaining spec element colors for consistency */
  --color-claims-modal-limitation-bg-1: var(--color-element-bg-spec-1);
  --color-claims-modal-limitation-border-1: var(--color-element-spec-1);
  --color-claims-modal-limitation-bg-2: var(--color-element-bg-spec-2);
  --color-claims-modal-limitation-border-2: var(--color-element-spec-2);
  --color-claims-modal-limitation-bg-3: var(--color-element-bg-spec-3);
  --color-claims-modal-limitation-border-3: var(--color-element-spec-3);
  --color-claims-modal-limitation-bg-4: var(--color-element-bg-terms-1);
  --color-claims-modal-limitation-border-4: var(--color-element-terms-1);
  --color-claims-modal-limitation-bg-5: var(--color-element-bg-terms-2);
  --color-claims-modal-limitation-border-5: var(--color-element-terms-2);
  
  /* Progress bar - keeping existing light theme progress colors */
  --color-claims-modal-progress-bg: var(--color-spec-progress-bg);
  --color-claims-modal-progress-fill: var(--color-spec-figure-text);
  --color-claims-modal-progress-stripe: var(--color-progress-stripe);
  
  /* Action buttons - using existing action colors */
  --color-claims-modal-action-primary: var(--color-action-primary);
  --color-claims-modal-action-primary-hover: var(--color-action-primary-hover);
  
  /* Checkbox - neutral grey for all themes */
  --color-claims-modal-checkbox-accent: #6c757d;
  
  /* Deselected claim numbers - using existing secondary action color */
  --color-claims-modal-deselected-number: var(--color-action-secondary);
  
  /* Score badges - using existing action colors */
  --color-claims-modal-score-bg: var(--color-action-primary);
  --color-claims-modal-score-text: var(--color-text-inverse);
  
  /* Toolbar button heights */
  --height-toolbar-button: 40px;
  --height-toolbar-button-md: 36px;
  --height-toolbar-button-sm: 32px;

  /* Thread styling variables */
  --thread-parent-spacing: 16px; /* Spacing between parent term and first child term */
  
  /* Animation timing */
  --thread-item-delay: 50ms;
  --thread-animation-duration: 200ms;

  /* Editor-specific variables */
  --editor-font-family: var(--font-family-base);
  --editor-font-size-base: 16px;
  --editor-font-size-h1: 18px;
  --editor-font-size-h2: 16px;
  --editor-font-size-h3: 15px;
  --editor-font-size-h4: 14px;
  --editor-spacing-base: 0.5em;
  --editor-spacing-large: 1em;
  --editor-color-placeholder: #adb5bd;

}

/* =================================================================
   Dark Theme Variables
   ================================================================= */

[data-theme="dark"] {
  /* Terms Colors - Adjusted for dark theme with better contrast */
  --color-terms-500: #5a5dae;
  --color-terms-600: #6a6dce;
  --color-terms-700: #9b9fff;  /* Much lighter for obvious hover/selected state */
  --color-terms-800: #b8c8ff;

  /* UI Element Colors - Dark theme */
  --color-menu-checkmark: var(--color-terms-600);  /* Default to terms color */

  /* Background Colors - Dark variants */
  --color-bg-toolbar: #3a3835;  /* Match claims panel for consistency */
  --color-bg-spec: #5d4d5d;  /* Lighter than spec button, preserving light mode delta */
  --color-bg-claims: #3a3835;  /* Lighter warm gray for better readability */
  --color-bg-terms: #4d4d6d;  /* Lighter than terms button, preserving light mode delta */
  --color-bg-terms-toolbar: #3a3a4d;  /* Slightly darker than terms panel for toolbar */
  --color-bg-main: #121212;
  --color-bg-file-dropdown: #605d5a;  /* Calculated using spec delta pattern */
  
  /* Button Colors - Dark theme */
  --color-btn-default: #5a5754;  /* Darker for WCAG AA text contrast */
  --color-btn-default-hover: #656360;  /* Darker hover for WCAG AA */
  --color-btn-default-active: #888582;  /* Lightest when active */
  --color-btn-spec: #675767;  /* Lighter purple tint for readability */
  --color-btn-spec-hover: #766676;
  --color-btn-spec-active: rgba(255, 255, 255, 0.2);
  --color-btn-spec-hover-alpha: rgba(118, 102, 118, 0.33);
  --color-btn-spec-hover-anim-light: rgba(118, 102, 118, 0.6);
  --color-btn-spec-hover-anim-dark: rgba(118, 102, 118, 1);
  --color-btn-terms: #57577a;  /* Lighter blue tint for readability */
  --color-btn-terms-hover: #66668a;
  --color-btn-terms-active: #75759a;

  /* Text Colors - Inverted for dark theme */
  --color-text-primary: #ebebeb;  /* Lighter for AAA contrast (7:1) */
  --color-text-secondary: #b8b8b8;  /* Slightly lighter for consistency */
  --color-text-tertiary: #c5c5c5;  /* Lightened from #888888 for WCAG AA compliance on dark backgrounds */
  --color-text-muted: #a3a3a3;  /* Lightened for WCAG AA on dark backgrounds */
  --color-text-inverse: #f5f5f5;  /* Light text for dark backgrounds (was black) */
  --color-text-button: #f5f5f5;  /* Light text for dark backgrounds (was black) */
  --color-text-on-light: #1a1a1a;  /* Dark text for light backgrounds in dark mode */
  
  /* Terms-related Colors - Adjusted for dark backgrounds */
  --color-term-bg: rgba(133, 155, 255, 0.25);
  --color-term-bg-loading: rgba(133, 155, 255, 0.2);
  --color-term-border: rgba(133, 155, 255, 0.5);
  --color-term-border-loading: rgba(133, 155, 255, 0.4);
  --color-term-highlight-bg: rgba(133, 155, 255, 0.3);
  --color-term-highlight-bg-hover: rgba(133, 155, 255, 0.45);
  --color-term-highlight-border: #b8c8ff;  /* Adjusted from #a8b8ff for WCAG AA compliance */
  --color-term-adding-selection: rgba(98, 113, 255, 0.5);
  --color-term-adding-hover: rgba(98, 113, 255, 0.2);
  --color-term-adding-cursor: #9b9fff;
  
  /* Terms Panel Line Features - Dark theme */
  --color-terms-divider: rgba(133, 155, 255, 0.4);      /* Terms toolbar bottom divider - more visible in dark */
  --color-terms-thread-line: rgba(133, 155, 255, 0.5);  /* Thread container lines - more visible in dark */
  --color-terms-thread-hover: rgba(133, 155, 255, 0.3); /* Thread item hover background - more visible in dark */
  
  /* Notification Modal Colors - Dark mode */
  --color-notification-header-bg: #57577a;  /* Dark terms button color for header */
  --color-notification-header-border: #66668a;  /* Dark terms button hover for border */
  --color-notification-body-bg: #2a2a2a;  /* Dark gray body background */
  --color-notification-text-primary: #ebebeb;  /* Light text on dark header */
  --color-notification-text-secondary: #b8b8b8;  /* Light secondary text on dark body */
  --color-notification-text-emphasis: #b8c8ff;  /* Light terms blue for emphasis text */
  --color-notification-close-btn: #75759a;  /* Terms active color for close button */
  --color-notification-close-btn-hover: #9b9fff;  /* Lighter blue on hover */
  --color-notification-close-btn-bg-hover: rgba(155, 159, 255, 0.15);  /* Subtle background on hover */
  --color-notification-backdrop: rgba(0, 0, 0, 0.7);  /* Darker backdrop for dark mode */
  
  /* Specification-related Colors - Dark theme */
  --color-spec-figure-bg: #2a1a2a;
  --color-spec-figure-bg-hover: #3a2a3a;
  --color-spec-figure-text: #e4c8e8;  /* Lightened for WCAG AA on dark backgrounds */
  --color-spec-boilerplate-bg: rgba(212, 84, 138, 0.1);
  --color-spec-boilerplate-border: rgba(212, 84, 138, 0.4);
  
  /* Spec Progress Bar Colors - Dark theme */
  --color-spec-progress-bg: rgba(30, 30, 35, 0.85);
  --color-spec-progress-bg-gradient-end: rgba(35, 35, 40, 0.85);
  --color-spec-progress-border: rgba(255, 146, 195, 0.2);
  --color-spec-progress-shadow: rgba(255, 146, 195, 0.12);
  --color-spec-progress-track: rgba(255, 146, 195, 0.15);
  --color-spec-progress-fill-start: rgba(255, 146, 195, 0.4);
  --color-spec-progress-fill-end: rgba(255, 146, 195, 0.5);
  --color-spec-progress-shimmer: rgba(255, 255, 255, 0.2);
  --color-spec-progress-steps: rgba(255, 146, 195, 0.8);
  --color-spec-progress-time: var(--color-text-secondary);
  --color-spec-progress-time-opacity: 0.6;

  /* Term Progress Bar Colors - Dark theme */
  --color-term-progress-bg: rgba(30, 30, 35, 0.85);
  --color-term-progress-bg-gradient-end: rgba(35, 35, 40, 0.85);
  --color-term-progress-border: rgba(100, 181, 246, 0.2);
  --color-term-progress-shadow: rgba(100, 181, 246, 0.12);
  --color-term-progress-track: rgba(100, 181, 246, 0.15);
  --color-term-progress-fill-start: rgba(100, 181, 246, 0.4);
  --color-term-progress-fill-end: rgba(100, 181, 246, 0.5);
  --color-term-progress-shimmer: rgba(255, 255, 255, 0.2);
  --color-term-progress-steps: rgba(100, 181, 246, 0.8);
  --color-term-progress-time: var(--color-text-secondary);
  --color-term-progress-time-opacity: 0.6;

  /* Semantic Colors */
  --color-error: #ff6b6b;
  --color-error-hover: #ff8787;
  --shadow-error-focus: 0 0 0 2px rgba(255, 135, 135, 0.4);
  
  /* Neutral Colors - Dark theme */
  --color-white: #121212;
  --color-gray-200: #2a2a2a;
  --color-gray-300: #3a3a3a;
  --color-gray-400: #4a4a4a;
  
  /* Overlay Colors - Dark theme */
  --color-overlay-light: rgba(0, 0, 0, 0.9);
  --color-backdrop: rgba(0, 0, 0, 0.7);
  
  /* Surface Colors - Dark theme - For modals, floating panels, popovers, etc. */
  
  /* Context-aware surface colors - Dark theme */

  /* Neutral variant - warm gray like claims */
  --color-surface-header-neutral: #423e3b;  /* Slightly lighter warm gray for header */
  --color-surface-content-neutral: #3a3835;  /* Same warm gray as claims panel */
  
  /* Spec variant (pink-lavender) */
  --color-surface-header-spec: #3a2d3a;
  --color-surface-content-spec: #3a2d3a;
  --color-surface-panel-spec-frosted: rgba(58, 45, 58, 0.85); /* Frosted spec panel dark - 85% opacity */
  --color-surface-header-spec-frosted: rgba(58, 45, 58, 0.95); /* Frosted spec header dark - 95% opacity */
  --color-spec-border: rgba(183, 147, 188, 0.4); /* Spec lavender border dark */
  
  /* Terms variant (blue tones) */
  --color-surface-header-terms: #2d3a4d;
  --color-surface-content-terms: #1e2128;
  
  /* Claims variant (beige tones) */
  --color-surface-header-claims: #3a3835;  /* Match claims editor exactly */
  --color-surface-content-claims: #322f2c;  /* Slightly darker for content area */
  
  /* Dialog specific colors - Dark theme */
  --color-dialog-header-terms: rgb(87, 97, 168);   /* Darker terms dialog header */
  --color-dialog-bg-warning: rgb(64, 60, 45);      /* Dark warning background */
  --color-dialog-preview-bg: rgb(45, 47, 55);      /* Dark preview background */
  --color-dialog-btn-confirm: rgb(87, 97, 168);    /* Dark confirm button */
  --color-dialog-btn-confirm-hover: rgb(107, 117, 188); /* Dark confirm hover */
  --color-dialog-btn-cancel: rgb(73, 71, 67);      /* Dark cancel button */
  --color-dialog-btn-cancel-hover: rgb(93, 91, 87); /* Dark cancel hover */
  
  /* Collaboration colors (Comments & Version Changes) - Dark theme */
  --color-collab-header-dark: #2A3338;        /* Dark gray-blue header */
  --color-collab-border-dark: #5A6871;        /* Medium dark gray-blue border */
  --color-collab-badge-dark: #3C464C;         /* Dark gray-blue badge */
  --color-collab-text-dark: #C5D1D8;          /* Light gray-blue text */
  --color-collab-hover-dark: #394147;         /* Dark hover state */
  --color-collab-light-dark: #1F262A;         /* Very dark gray-blue */
  
  /* Collaboration surface colors - Dark theme */
  --color-surface-header-collab: #1F262A;     /* Very dark gray-blue */
  --color-surface-content-collab: #1A2025;    /* Near black with blue tint */
  --color-surface-panel-collab: #161B1F;      /* Dark panel background */
  --color-surface-panel-collab-frosted: rgba(22, 27, 31, 0.7); /* Frosted glass dark - 70% opacity */
  --color-surface-header-collab-frosted: rgba(42, 51, 56, 0.8); /* Frosted header dark - 80% opacity */
  
  /* Collaboration diff content colors - Dark theme */
  --color-collab-added-bg-dark: rgba(72, 187, 120, 0.25);
  --color-collab-added-text-dark: #48BB78;
  --color-collab-removed-bg-dark: rgba(245, 101, 101, 0.25);
  --color-collab-removed-text-dark: #F56565;
  --color-collab-modified-bg-dark: rgba(255, 193, 7, 0.15);
  --color-collab-modified-text-dark: #FFB020;
  --color-collab-modified-border-dark: rgba(255, 193, 7, 0.4);
  
  /* Comments panel dark mode - Aliases for backward compatibility */
  --color-comments-header-dark: var(--color-collab-header-dark);
  --color-comments-border-dark: var(--color-collab-border-dark);
  --color-comments-badge-dark: var(--color-collab-badge-dark);
  --color-comments-text-dark: var(--color-collab-text-dark);
  --color-comments-hover-dark: var(--color-collab-hover-dark);
  --color-comments-light-dark: var(--color-collab-light-dark);
  --color-surface-header-comments: var(--color-surface-header-collab);
  --color-surface-content-comments: var(--color-surface-content-collab);
  --color-surface-panel-comments: var(--color-surface-panel-collab);
  --color-surface-panel-comments-frosted: var(--color-surface-panel-collab-frosted);
  --color-surface-header-comments-frosted: var(--color-surface-header-collab-frosted);
  
  /* Panel background colors with opacity scale - Dark theme */
  --color-bg-panel-20: rgba(255, 255, 255, 0.03);
  --color-bg-panel-30: rgba(255, 255, 255, 0.05);
  --color-bg-panel-50: rgba(255, 255, 255, 0.08);
  --color-bg-panel-80: rgba(255, 255, 255, 0.12);
  
  /* Active line emphasis for editors - Dark theme */
  --color-bg-panel-light: rgba(216, 200, 168, 0.08);  /* Subtle warm beige for dark mode */
  --color-bg-panel-medium: rgba(216, 200, 168, 0.15); /* Slightly stronger for hover states */
  
  /* Accent background colors with opacity scale - Dark theme */
  --color-bg-accent-20: rgba(183, 147, 188, 0.2);
  --color-bg-accent-30: rgba(183, 147, 188, 0.3);
  --color-bg-accent-50: rgba(183, 147, 188, 0.5);
  --color-bg-accent-80: rgba(183, 147, 188, 0.8);
  --color-bg-accent-100: rgba(183, 147, 188, 1);
  --color-bg-input: rgba(255, 255, 255, 0.1);
  --color-bg-interactive-hover: rgba(255, 255, 255, 0.12);
  --color-bg-hover-light: rgba(255, 255, 255, 0.1);
  --color-bg-button-primary: rgba(183, 147, 188, 0.9);
  --color-bg-button-primary-hover: rgba(183, 147, 188, 1);
  
  /* Standardized button colors - Dark Theme (purple accent) */
  --color-button-accent-bg: rgba(183, 147, 188, 0.9);  /* Purple for primary actions */
  --color-button-accent-bg-hover: rgba(183, 147, 188, 1);
  --color-button-accent-text: white;
  
  --color-button-secondary-bg: #6c757d;  /* Gray for secondary actions */
  --color-button-secondary-bg-hover: #5a6268;
  --color-button-secondary-text: white;
  
  --color-button-danger-bg: #dc3545;  /* Red for destructive actions */
  --color-button-danger-bg-hover: #c82333;
  --color-button-danger-text: white;
  
  /* Additional text and accent colors - Dark theme */
  --color-error-text: #ff9999;
  --color-error-bg: #3d2626;
  --color-error-bg-hover: #4d2c2c;
  --color-error-bg-selected: #8d5656;
  --color-error-border: #8b4444;
  --color-error-border-hover: #a55555;
  
  /* Validation error colors - Dark theme */
  --color-warning: #fbbf24;
  --color-validation-error-bg: rgba(239, 68, 68, 0.1);
  --color-validation-error-bg-hover: rgba(239, 68, 68, 0.15);
  --color-validation-error-text: var(--color-text-primary);
  --color-validation-warning-bg: rgba(245, 158, 11, 0.1);
  --color-validation-warning-bg-hover: rgba(245, 158, 11, 0.15);
  --color-validation-warning-text: var(--color-text-primary);
  
  /* Border colors - Dark theme */
  --border-color-default: rgba(255, 255, 255, 0.2);
  --border-color-light: rgba(255, 255, 255, 0.1);
  --border-color-dark: rgba(255, 255, 255, 0.3);
  
  /* Shadow adjustments for dark theme */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-inset-xs: inset 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-inset-sm: inset 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-inset-md: inset 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.14);
  
  /* Focus shadows - Dark theme */
  --shadow-focus-spec: 0 0 0 3px rgba(183, 147, 188, 0.4);  /* Pink-lavender focus for spec-related */
  --shadow-focus-terms: 0 0 0 3px rgba(133, 155, 255, 0.4);  /* Blue focus for terms-related */
  
  /* Terms-specific shadows - Dark theme */
  --shadow-terms-sm: 0 2px 4px rgba(133, 155, 255, 0.3);
  --shadow-terms-md: 0 3px 5px rgba(133, 155, 255, 0.4);
  --shadow-terms-selected: 0 0 0 2px rgba(133, 155, 255, 0.4), 0 2px 4px rgba(133, 155, 255, 0.3);
  --shadow-terms-button-active: 0 0 0 2px rgba(198, 194, 241, 0.4);
  
  /* Input colors - Dark theme (for floating panels) */
  --color-input-bg-floating: rgba(45, 45, 45, 0.8);
  --color-checkbox-bg-dark: rgba(255, 255, 255, 0.1);
  --color-input-bg-spec-dark: rgba(183, 147, 188, 0.15);
  --color-input-bg-spec-dark-focus: rgba(183, 147, 188, 0.25);
  --color-action-btn-bg-spec-dark: rgba(183, 147, 188, 0.15);
  
  /* Editor-specific dark theme */
  --thread-item-bg: rgba(255, 255, 255, 0.05);
  --thread-item-bg-muted: rgba(255, 255, 255, 0.02);
  --thread-item-bg-active: rgba(255, 255, 255, 0.08);
  --editor-code-bg: var(--color-gray-300);
  --editor-pre-bg: var(--color-gray-300);
  --editor-link-color: var(--color-terms-700);
  --editor-link-hover-color: var(--color-terms-800);
  --editor-selection-bg: rgba(133, 155, 255, 0.3);
  --editor-placeholder-color: var(--color-text-muted);
  
  /* Additional dark theme overrides */
  --color-figure-text-hover: #e7c3ec;
  
  /* Surface colors now use variant-specific variables only */
  
  /* Context-aware notification bubble colors - Dark theme */

  /* Spec variant (pink/lavender) - for specification-related notifications */
  --color-bubble-bg-spec: #6b4c57;  /* Darker pink-brown matching light mode hue */
  --color-bubble-text-spec: #f2d4e0;  /* Light pink text matching light mode bg */
  --color-bubble-arrow-spec: #6b4c57;
  
  /* Terms variant (blue) - for terms-related notifications */
  --color-bubble-bg-terms: var(--color-terms-700);
  --color-bubble-text-terms: var(--color-text-inverse);
  --color-bubble-arrow-terms: var(--color-terms-700);
  
  /* Error variant (red) - for error messages */
  --color-bubble-bg-error: var(--color-error);
  --color-bubble-text-error: var(--color-text-inverse);
  --color-bubble-arrow-error: var(--color-error);
  
  /* Neutral variant (gray) - for general information */
  --color-bubble-bg-neutral: var(--color-text-secondary);
  --color-bubble-text-neutral: var(--color-text-inverse);
  --color-bubble-arrow-neutral: var(--color-text-secondary);
  
  /* Success variant (dark) - for success messages */
  --color-bubble-bg-success: rgba(45, 45, 45, 0.98); /* Lighter version of dark mode main bg */
  --color-bubble-text-success: var(--color-text-primary);
  --color-bubble-arrow-success: rgba(45, 45, 45, 0.98);
  
  /* Scrollbar dark theme colors - matching spec editor pattern */
  --color-scrollbar-track: transparent;
  --color-scrollbar-thumb: rgba(183, 147, 188, 0.3);  /* Slightly more visible in dark mode */
  --color-scrollbar-thumb-border: transparent;
  --color-scrollbar-thumb-hover: rgba(183, 147, 188, 0.5);  /* More contrast on hover */
  
  /* Editor-specific scrollbar colors - dark theme */
  --color-scrollbar-claims-thumb: rgba(186, 174, 142, 0.3);  /* Warm beige with more opacity */
  --color-scrollbar-claims-thumb-hover: rgba(186, 174, 142, 0.5);
  --color-scrollbar-terms-thumb: rgba(127, 151, 248, 0.3);  /* Light blue with more opacity */
  --color-scrollbar-terms-thumb-hover: rgba(127, 151, 248, 0.5);
  --color-scrollbar-spec-thumb: rgba(183, 147, 188, 0.3);  /* Lavender with more opacity */
  --color-scrollbar-spec-thumb-hover: rgba(183, 147, 188, 0.5);
  
  /* Panel hierarchy dark theme */
  --color-panel-primary-bg: #1e1e1e;
  --color-panel-secondary-bg: #2a242a;  /* Dark with subtle purple */
  --color-panel-tertiary-bg: #3a2d3a;   /* Darker purple tint */
  
  /* Interactive states dark theme */
  --color-interactive-default: #4a3d4a;   /* Dark purple-gray */
  --color-interactive-hover: #5a4a5a;     /* Lighter purple-gray */
  --color-interactive-disabled: rgba(212, 84, 138, 0.1);
  
  /* Input colors dark theme */
  --color-input-bg: #2a242a;             /* Dark with subtle purple */
  --color-input-bg-focus: #322c32;       /* Slightly lighter on focus */
  
  /* Status colors dark theme - harmonized */
  --color-status-success: #a5c4aa;      /* Light sage green */
  
  /* Toggle/Switch colors dark theme */
  --color-toggle-off: #595959;          /* Medium gray for off state */
  --color-toggle-on: #a5c4aa;           /* Same as success - light sage green */
  --color-toggle-on-hover: #b5d4ba;     /* Lighter sage for hover */
  
  /* Action colors dark theme */
  --color-action-primary: #d7b3dc;        /* Light lavender for dark mode */
  --color-action-primary-hover: #e7c3ec;  /* Even lighter on hover */
  --color-action-secondary: #b8a5ba;      /* Muted light purple */
  --color-action-secondary-hover: #c8b5ca;
  --color-action-danger: #ff6b6b;
  
  /* Element categorization dark theme - aligned with spec and terms */
  --color-element-spec-1: var(--color-spec-figure-text);  /* Light lavender */
  --color-element-spec-2: #e889b5;  /* Light rose pink */
  --color-element-spec-3: #f5b5ce;  /* Light soft pink */
  --color-element-terms-1: var(--color-terms-600);  /* Light blue */
  --color-element-terms-2: var(--color-terms-700);  /* Deeper blue */
  --color-element-bg-spec-1: rgba(215, 179, 220, 0.2);
  --color-element-bg-spec-2: rgba(232, 137, 181, 0.2);
  --color-element-bg-spec-3: rgba(245, 181, 206, 0.2);
  --color-element-bg-terms-1: var(--color-term-bg);
  --color-element-bg-terms-2: rgba(122, 125, 238, 0.2);

  /* =================================================================
     Claims Assignment Modal Color Variables - Dark Theme
     ================================================================= */
  
  /* Panel backgrounds - dark theme appropriate colors */
  --color-claims-modal-panel-primary: var(--color-panel-primary-bg);
  --color-claims-modal-panel-secondary: var(--color-panel-secondary-bg);
  --color-claims-modal-panel-tertiary: var(--color-panel-tertiary-bg);
  
  /* Interactive elements - dark theme patterns */
  --color-claims-modal-interactive-default: var(--color-interactive-default);
  --color-claims-modal-interactive-hover: var(--color-interactive-hover);
  --color-claims-modal-interactive-disabled: var(--color-interactive-disabled);
  
  /* Input fields - dark theme */
  --color-claims-modal-input-bg: var(--color-input-bg);
  --color-claims-modal-input-bg-focus: var(--color-input-bg-focus);
  
  /* Limitation group headers - using dark theme element colors */
  --color-claims-modal-limitation-bg-1: var(--color-element-bg-spec-1);
  --color-claims-modal-limitation-border-1: var(--color-element-spec-1);
  --color-claims-modal-limitation-bg-2: var(--color-element-bg-spec-2);
  --color-claims-modal-limitation-border-2: var(--color-element-spec-2);
  --color-claims-modal-limitation-bg-3: var(--color-element-bg-spec-3);
  --color-claims-modal-limitation-border-3: var(--color-element-spec-3);
  --color-claims-modal-limitation-bg-4: var(--color-element-bg-terms-1);
  --color-claims-modal-limitation-border-4: var(--color-element-terms-1);
  --color-claims-modal-limitation-bg-5: var(--color-element-bg-terms-2);
  --color-claims-modal-limitation-border-5: var(--color-element-terms-2);
  
  /* Progress bar - dark theme progress colors */
  --color-claims-modal-progress-bg: var(--color-spec-progress-bg);
  --color-claims-modal-progress-fill: var(--color-spec-figure-text);
  --color-claims-modal-progress-stripe: var(--color-progress-stripe);
  
  /* Action buttons - dark theme action colors */
  --color-claims-modal-action-primary: var(--color-action-primary);
  --color-claims-modal-action-primary-hover: var(--color-action-primary-hover);
  
  /* Checkbox - neutral grey for all themes */
  --color-claims-modal-checkbox-accent: #6c757d;
  
  /* Deselected claim numbers - using existing secondary action color */
  --color-claims-modal-deselected-number: var(--color-action-secondary);
  
  /* Score badges - dark theme appropriate */
  --color-claims-modal-score-bg: var(--color-action-primary);
  --color-claims-modal-score-text: var(--color-text-inverse);
  
  /* Patent keyword highlighting - Dark theme */
  --color-patent-keyword: #d4a574;  /* Lighter golden brown for dark theme */
  
  /* Search highlighting colors - Dark theme */
  --color-search-highlight-bg: rgba(255, 227, 69, 0.4);
  --color-search-highlight-border: rgba(255, 169, 69, 0.6);
  --color-search-highlight-current-bg: rgba(255, 169, 69, 0.6);
  --color-search-highlight-current-border: rgba(255, 140, 0, 0.9);
  --color-search-highlight-current-shadow: rgba(255, 140, 0, 0.5);
  
  /* Panel title colors - Dark theme */
  --color-panel-title-claims: #d8c8c5;  /* Light warm beige for dark mode */
  --color-panel-title-spec: var(--color-spec-figure-text);  /* Light purple for dark mode */
  --color-panel-title-terms: #b8c8ff;  /* Light blue for dark mode - adjusted from #a8b8ff for WCAG AA compliance */
}

/* =================================================================
   Classic Theme - Artboard Style
   ================================================================= */

[data-theme="classic"] {
  --color-terms-500: #a3c09a;  /* Medium green based on #C9DDBF */
  --color-terms-600: #C9DDBF;  /* Base green color provided */
  --color-terms-700: rgb(240, 248, 235);  /* Much lighter green for stronger selected state contrast */
  --color-terms-800: #5a8048;  /* Darker green for contrast */

  /* Validation colors - Classic theme with inverse text */
  --color-validation-error-text: var(--color-text-inverse);
  --color-validation-warning-text: var(--color-text-primary);

  /* UI Element Colors - Classic theme */
  --color-menu-checkmark: #5a8048;  /* Darker green for better contrast */
  
  /* Notification Modal Colors - Classic mode (green-based) */
  --color-notification-header-bg: #a3c09a;  /* Darker version of #C9DDBF for header */
  --color-notification-header-border: #b8ceb0;  /* Medium tone between #C9DDBF and darker version */
  --color-notification-body-bg: #ffffff;  /* White body background */
  --color-notification-text-primary: #ffffff;  /* White text on green header */
  --color-notification-text-secondary: #374151;  /* Dark text on light body */
  --color-notification-text-emphasis: #5a8048;  /* Darker green from classic theme for emphasis text */
  --color-notification-close-btn: #e8f2e4;  /* Very light green tint for close button */
  --color-notification-close-btn-hover: #ffffff;  /* White close button on hover */
  --color-notification-close-btn-bg-hover: rgba(255, 255, 255, 0.15);  /* Subtle background on hover */
  --color-notification-backdrop: rgba(0, 0, 0, 0.5);  /* Modal backdrop */

  /* Classic theme uses light mode as base with artboard styling */
  /* Background Colors - Classic theme with white panels */
  --color-bg-toolbar: #FDFCF9;  /* Keep toolbar beige */
  --color-bg-spec: #ffffff;     /* White spec panel for artboard look */
  --color-bg-claims: #ffffff;   /* White claims panel for artboard look */
  --color-bg-terms: #e4e4e4;    /* Keep terms panel gray */
  --color-bg-terms-toolbar: #979797;
  --color-bg-main: #ECEBE4;     /* Light gray background for artboard feel */
  --color-bg-file-dropdown: #e4e4e4;
  --color-bg-accent-20: rgba(201, 221, 191, 0.2);
  --color-bg-accent-30: rgba(201, 221, 191, 0.3);
  --color-bg-accent-50: rgba(201, 221, 191, 0.5);
  --color-bg-accent-80: rgba(201, 221, 191, 0.8);
  --color-bg-accent-100: rgb(201, 221, 191);
  
  /* Panel borders for artboard effect - using light mode panel colors */
  --color-spec-border: #ffffff;   /* Light pink/lavender matching spec panel color */
  --color-claims-border: #ffffff; /* Light beige matching claims panel color */
  
  /* Button Colors*/
  --color-btn-default: #EDEDED;
  --color-btn-default-hover: #dad7d7;
  --color-btn-default-active: #fdfcfa;
  --color-btn-spec: #EDEDED;
  --color-btn-spec-hover: #dad7d7;
  --color-btn-spec-active: rgba(255, 255, 255, 0.6);
  --color-btn-spec-hover-alpha: rgba(211, 210, 210, 0.33);
  --color-btn-spec-hover-anim-light: rgba(186, 186, 186, 0.6);
  --color-btn-spec-hover-anim-dark: rgb(197, 197, 197);
  --color-btn-terms: #EDEDED;
  --color-btn-terms-hover: #dad7d7;
  --color-btn-terms-active: rgba(186, 186, 186, 0.6);
  
  /* Standardized button colors - Classic Theme (sage green accent) */
  --color-button-accent-bg: #a3c09a;  /* Sage green for primary actions */
  --color-button-accent-bg-hover: #8fb085;
  --color-button-accent-text: white;
  
  --color-button-secondary-bg: #6c757d;  /* Gray for secondary actions */
  --color-button-secondary-bg-hover: #5a6268;
  --color-button-secondary-text: white;
  
  --color-button-danger-bg: #dc3545;  /* Red for destructive actions */
  --color-button-danger-bg-hover: #c82333;
  --color-button-danger-text: white;

  /* Text Colors - Same as light mode */
  --color-text-primary: #333333;
  --color-text-secondary: #4d4d4d;
  --color-text-tertiary: #646464;
  --color-text-muted: #655f5a;
  --color-text-inverse: #646464;
  --color-text-button: #EDEDED;
  
  /* Terms-related Colors - Green theme based on #C9DDBF */
  --color-term-bg: rgba(201, 221, 191, 0.15);  /* Base green with 15% opacity */
  --color-term-bg-loading: rgba(201, 221, 191, 0.12);  /* Base green with 12% opacity */
  --color-term-border: rgba(201, 221, 191, 0.3);  /* Base green with 30% opacity */
  --color-term-border-loading: rgba(201, 221, 191, 0.25);  /* Base green with 25% opacity */
  --color-term-highlight-bg: rgba(201, 221, 191, 0.25);  /* Base green with 25% opacity */
  --color-term-highlight-bg-hover: rgba(163, 192, 154, 0.38);  /* Darker green with 38% opacity */
  --color-term-highlight-border: #a3c09a;  /* Medium green for borders */
  --color-term-adding-selection: rgba(163, 192, 154, 0.4);  /* Medium green with 40% opacity */
  --color-term-adding-hover: rgba(201, 221, 191, 0.1);  /* Base green with 10% opacity */
  --color-term-adding-cursor: #a3c09a;  /* Medium green for cursor */
  
  /* Terms Panel Line Features - Classic theme (Green) */
  --color-terms-divider: rgba(125, 155, 108, 0.4);      /* Terms toolbar bottom divider - green */
  --color-terms-thread-line: rgba(136, 167, 119, 0.5);  /* Thread container lines - green */
  --color-terms-thread-hover: rgba(152, 203, 125, 0.3); /* Thread item hover background - green */

  /* Terms-specific shadows - Green theme */
  --shadow-terms-sm: 0 2px 4px rgba(201, 221, 191, 0.3);
  --shadow-terms-md: 0 3px 5px rgba(201, 221, 191, 0.4);
  --shadow-terms-selected: 0 0 0 2px rgba(201, 221, 191, 0.4), 0 2px 4px rgba(163, 192, 154, 0.3);
  --shadow-terms-button-active: 0 0 0 2px rgba(201, 221, 191, 0.4);
  
  /* Specification-related Colors - Greyscale*/
  --color-spec-figure-bg: #f5f5f5;  /* Greyscale version */
  --color-spec-figure-bg-hover: #ebebeb;  /* Greyscale version */
  --color-spec-figure-text: #272727;  /* Greyscale version */
  --color-spec-figure-text-hover: #202020;  /* Greyscale hover version */
  --color-spec-boilerplate-bg: rgba(160, 160, 160, 0.06);  /* Greyscale version */
  --color-spec-boilerplate-border: rgba(160, 160, 160, 0.3);  /* Greyscale version */
  --color-spec-info-box-bg: var(--color-bg-spec);
  
  /* Inline comment colors - Greyscale */
  --color-spec-inline-comment-bg: rgba(160, 160, 160, 0.08);
  --color-spec-inline-comment-bg-hover: rgba(160, 160, 160, 0.12);
  --color-spec-inline-comment-bg-special: rgba(160, 160, 160, 0.1);
  --color-spec-inline-comment-border: rgba(160, 160, 160, 0.3);
  --color-spec-inline-comment-border-hover: rgba(160, 160, 160, 0.5);
  --color-spec-inline-comment-bg-dark: rgba(160, 160, 160, 0.15);
  --color-spec-inline-comment-bg-hover-dark: rgba(160, 160, 160, 0.2);
  --color-spec-inline-comment-border-dark: rgba(160, 160, 160, 0.4);
  --color-spec-inline-comment-border-hover-dark: rgba(160, 160, 160, 0.6);
  
  /* Spec Progress Bar Colors - Classic theme (Greyscale) */
  --color-spec-progress-bg: rgba(255, 255, 255, 0.85);
  --color-spec-progress-bg-gradient-end: rgba(252, 252, 252, 0.85);
  --color-spec-progress-border: rgba(160, 160, 160, 0.15);
  --color-spec-progress-shadow: rgba(0, 0, 0, 0.06);
  --color-spec-progress-track: rgba(160, 160, 160, 0.12);
  --color-spec-progress-fill-start: rgba(120, 120, 120, 0.5);
  --color-spec-progress-fill-end: rgba(100, 100, 100, 0.7);
  --color-spec-progress-shimmer: rgba(255, 255, 255, 0.4);
  --color-spec-progress-steps: rgba(80, 80, 80, 0.9);
  --color-spec-progress-time: var(--color-text-secondary);
  --color-spec-progress-time-opacity: 0.7;

  /* Term Progress Bar Colors - Classic theme (Greyscale) */
  --color-term-progress-bg: rgba(255, 255, 255, 0.85);
  --color-term-progress-bg-gradient-end: rgba(252, 252, 252, 0.85);
  --color-term-progress-border: rgba(160, 160, 160, 0.15);
  --color-term-progress-shadow: rgba(0, 0, 0, 0.06);
  --color-term-progress-track: rgba(160, 160, 160, 0.12);
  --color-term-progress-fill-start: rgba(120, 120, 120, 0.5);
  --color-term-progress-fill-end: rgba(100, 100, 100, 0.7);
  --color-term-progress-shimmer: rgba(255, 255, 255, 0.4);
  --color-term-progress-steps: rgba(80, 80, 80, 0.9);
  --color-term-progress-time: var(--color-text-secondary);
  --color-term-progress-time-opacity: 0.7;

  /* Semantic Colors - Same as light mode */
  --color-error: #f44336;
  --color-error-hover: #ff5252;
  --shadow-error-focus: 0 0 0 2px rgba(255, 107, 107, 0.4);
  
  /* Notification bubble colors - Classic theme specific */
  --color-bubble-bg-error: #dc3545;  /* Darker red for better contrast */
  --color-bubble-text-error: #ffffff;  /* White text for readability */
  --color-bubble-arrow-error: #dc3545;  /* Match background */
  
  /* Surface Colors - Greyscale for classic mode */
  --color-surface-panel-spec-frosted: rgba(255, 255, 255, 0.95);
  --color-surface-header-spec-frosted: rgba(211, 210, 210, 0.95); /* Frosted spec header - 95% opacity */
  --color-surface-panel-collab: #F8F8F8;  /* Greyscale */
  --color-surface-panel-collab-frosted: rgba(248, 248, 248, 0.6);  /* Greyscale */
  --color-surface-panel-comments: var(--color-surface-panel-collab);
  --color-surface-panel-comments-frosted: var(--color-surface-panel-collab-frosted);
  
  /* Modal/Dialog surface colors - Greyscale */
  --color-surface-header-neutral: #d8d8d8;  /* Greyscale header */
  --color-surface-content-neutral: #f0f0f0;  /* Greyscale content */
  --color-surface-header-spec: #e8e8e8;  /* Greyscale */
  --color-surface-content-spec: #e8e8e8;  /* Greyscale */
  --color-surface-header-terms: #e8f2e4;  /* Light green for terms */
  --color-surface-content-terms: #f5faf3;  /* Very light green for terms */
  --color-surface-header-claims: #e0e0e0;  /* Greyscale */
  --color-surface-content-claims: #f0f0f0;  /* Greyscale */
  
  /* Dialog specific colors - Greyscale except terms */
  --color-dialog-header-terms: rgb(201, 221, 191);  /* Green for terms */
  --color-dialog-bg-warning: rgb(255, 254, 254);  /* Keep yellow for warnings */
  --color-dialog-preview-bg: rgb(226, 226, 226);  /* Greyscale */
  --color-dialog-btn-confirm: rgb(163, 192, 154);  /* Green for terms */
  --color-dialog-btn-confirm-hover: rgb(143, 172, 134);  /* Darker green on hover */
  --color-dialog-btn-cancel: rgb(220, 220, 220);  /* Greyscale */
  --color-dialog-btn-cancel-hover: rgb(200, 200, 200);  /* Greyscale */
  
  /* Collaboration colors - Greyscale */
  --color-collab-header: #E0E0E0;  /* Greyscale */
  --color-collab-border: #808080;  /* Greyscale */
  --color-collab-badge: #C0C0C0;  /* Greyscale */
  --color-collab-text: #505050;  /* Greyscale */
  --color-collab-hover: #D8D8D8;  /* Greyscale */
  --color-collab-light: #E0E0E0;  /* Greyscale */
  --color-surface-header-collab: #E0E0E0;  /* Greyscale */
  --color-surface-content-collab: #F0F0F0;  /* Greyscale */
  --color-surface-panel-collab: #F8F8F8;  /* Greyscale */
  --color-surface-panel-collab-frosted: rgba(248, 248, 248, 0.6);  /* Greyscale */
  --color-surface-header-collab-frosted: rgba(224, 224, 224, 0.8);  /* Greyscale */
  
  /* Panel title colors - Same greyscale color for all panels */
  --color-panel-title-claims: #515151; /* Greyscale */
  --color-panel-title-spec: #515151;   /* Greyscale */
  --color-panel-title-terms: #515151;  /* Greyscale - same as others */
  
  /* Scrollbar colors - Greyscale except terms */
  --color-scrollbar-claims-thumb: rgba(160, 160, 160, 0.2);  /* Greyscale */
  --color-scrollbar-terms-thumb: rgba(163, 192, 154, 0.3);  /* Medium green with transparency for better visibility */
  --color-scrollbar-spec-thumb: rgba(160, 160, 160, 0.2);  /* Greyscale */
  
  /* Skeleton loader colors - Greyscale for classic mode */
  --color-skeleton-bg: rgba(160, 160, 160, 0.06);  /* Greyscale background */
  --color-skeleton-border: rgba(160, 160, 160, 0.3);  /* Greyscale border */
  --color-skeleton-line: rgba(160, 160, 160, 0.15);  /* Greyscale line */
  --color-skeleton-shimmer: rgba(255, 255, 255, 0.4);  /* Keep white shimmer */
  
  /* Border colors - Greyscale */
  --color-border-subtle: rgba(160, 160, 160, 0.2);  /* Greyscale border */
  --border-color-default: rgba(160, 160, 160, 0.3);  /* Greyscale border */
  --border-color-light: rgba(160, 160, 160, 0.1);  /* Greyscale border */
  --border-color-dark: rgba(160, 160, 160, 0.4);  /* Greyscale border */
  
  /* Toggle colors - Greyscale */
  --color-toggle-off: #b8b8b8;  /* Keep grey for toggle off */
  --color-toggle-on: #808080;   /* Greyscale for toggle on */
  --color-toggle-on-hover: #707070;  /* Darker grey for hover */
  
  /* Input and focus colors - Greyscale */
  --color-bg-input: rgba(248, 248, 248, 0.8);  /* Greyscale input background */
  --color-focus-ring: rgba(160, 160, 160, 0.5);  /* Greyscale focus ring */
  
  /* Additional surface colors that might be missing */
  --color-scrollbar-track: transparent;
  --color-scrollbar-thumb: rgba(160, 160, 160, 0.2);  /* Greyscale scrollbar */
  --color-scrollbar-thumb-hover: rgba(160, 160, 160, 0.4);  /* Greyscale scrollbar hover */
  
  /* Make sure backdrop stays dark */
  --color-backdrop: rgba(0, 0, 0, 0.3);
  
  /* Notification bubble colors - Greyscale for spec variant */
  --color-bubble-bg-spec: #e0e0e0;  /* Greyscale background */
  --color-bubble-text-spec: #505050;  /* Greyscale text */
  --color-bubble-arrow-spec: #e0e0e0;  /* Greyscale arrow */

  /* Panel hierarchy colors */
  --color-panel-primary-bg: #f7f7f7;    
  --color-panel-secondary-bg: #e0e0e0;  
  --color-panel-tertiary-bg: #eeeeee; 

  /* Interactive state colors */
  --color-interactive-default: #ebebeb;  /* Light gray */
  --color-interactive-hover: #e5e5e5;    /* Slightly darkergray */
  --color-interactive-disabled: rgba(161, 161, 161, 0.05);


  /* CodeMirror active line emphasis */
  --color-cm-active-line: rgba(156, 152, 141, 0.15);  /* Warm grey for claims editor active line */
  --color-cm-active-line-gutter: rgba(156, 152, 141, 0.15);  /* Same for gutter */

  /* Override additional blue root variables with green variants */
  --color-bg-terms: #e4e4e4;    /* Keep terms panel gray (override root) */
  --color-bg-terms-toolbar: #d4e5d0;  /* Medium green for terms toolbar */
  --color-btn-terms: #EDEDED;   /* Greyscale terms buttons */
  --color-btn-terms-hover: #dad7d7;  /* Greyscale terms button hover */
  --color-btn-terms-active: rgba(186, 186, 186, 0.6);  /* Greyscale terms button active */

  /* Green focus and shadow overrides */
  --shadow-focus-terms: 0 0 0 3px rgba(201, 221, 191, 0.5);  /* Green focus for terms */
  --shadow-terms-sm: 0 2px 4px rgba(201, 221, 191, 0.3);
  --shadow-terms-md: 0 3px 5px rgba(201, 221, 191, 0.4);
  --shadow-terms-selected: 0 0 0 2px rgba(201, 221, 191, 0.4), 0 2px 4px rgba(163, 192, 154, 0.3);
  --shadow-terms-button-active: 0 0 0 2px rgba(201, 221, 191, 0.4);

  /* Green element background overrides */
  --color-element-bg-terms-1: rgba(201, 221, 191, 0.15);
  --color-element-bg-terms-2: rgba(163, 192, 154, 0.15);

  /* Additional green surface colors */
  --color-surface-header-terms: #e8f2e4;  /* Light green for terms */
  --color-surface-content-terms: #f5faf3;  /* Very light green for terms */

  /* =================================================================
     Claims Assignment Modal Color Variables - Classic Theme
     ================================================================= */
  
  /* Panel backgrounds - grey tones matching classic theme */
  --color-claims-modal-panel-primary: #f7f7f7;        /* Light grey */
  --color-claims-modal-panel-secondary: #e0e0e0;      /* Medium grey */
  --color-claims-modal-panel-tertiary: #eeeeee;       /* Soft grey accent */
  
  /* Interactive elements - consistent greys */
  --color-claims-modal-interactive-default: #ebebeb;   /* Light grey */
  --color-claims-modal-interactive-hover: #e5e5e5;     /* Slightly darker grey */
  --color-claims-modal-interactive-disabled: rgba(161, 161, 161, 0.05);
  
  /* Input fields - clean greys */
  --color-claims-modal-input-bg: #f7f7f7;             /* Light grey */
  --color-claims-modal-input-bg-focus: #ffffff;       /* White on focus */
  
  /* Limitation group headers - subtle green variations matching classic theme */
  --color-claims-modal-limitation-bg-1: rgba(201, 221, 191, 0.3);   /* Light green tint */
  --color-claims-modal-limitation-border-1: #C9DDBF;                /* Base green */
  --color-claims-modal-limitation-bg-2: rgba(201, 221, 191, 0.25);  /* Slightly less green */
  --color-claims-modal-limitation-border-2: #b8ccab;                /* Darker green */
  --color-claims-modal-limitation-bg-3: rgba(201, 221, 191, 0.2);   /* Even lighter green */
  --color-claims-modal-limitation-border-3: #a3c09a;                /* Medium green */
  --color-claims-modal-limitation-bg-4: rgba(163, 192, 154, 0.25);  /* Different green shade */
  --color-claims-modal-limitation-border-4: #8fb085;                /* Deeper green */
  --color-claims-modal-limitation-bg-5: rgba(163, 192, 154, 0.2);   /* Lightest green */
  --color-claims-modal-limitation-border-5: #7a9c70;                /* Darkest green */
  
  /* Progress bar - green to match classic theme */
  --color-claims-modal-progress-bg: rgba(247, 247, 247, 0.9);
  --color-claims-modal-progress-fill: #C9DDBF;        /* Classic theme green */
  --color-claims-modal-progress-stripe: rgba(255, 255, 255, 0.2);
  
  /* Action buttons - classic theme green */
  --color-claims-modal-action-primary: #C9DDBF;       /* Classic theme green */
  --color-claims-modal-action-primary-hover: #b8ccab; /* Darker green hover */
  
  /* Checkbox - neutral grey instead of green */
  --color-claims-modal-checkbox-accent: #6c757d;      /* Neutral grey for checkboxes */
  
  /* Deselected claim numbers - darker green for better readability */
  --color-claims-modal-deselected-number: #7a9c70;    /* Darker green for better contrast */
  
  /* Score badges - green with good contrast */
  --color-claims-modal-score-bg: #a3c09a;             /* Medium green */
  --color-claims-modal-score-text: #ffffff;           /* White text for contrast */
}

/* =================================================================
   Ambiguous Term Tooltip Styles (unified article errors and parent warnings)
   ================================================================= */

/* Ambiguous term tooltip - Light mode by default */
.cm-ambiguous-term-tooltip {
  position: absolute;
  z-index: 1000;
  min-width: 350px;
  max-width: 450px;
  padding: 12px 16px;
  margin-top: -8px;
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-line;
  
  /* Light mode colors by default */
  color: var(--color-tooltip-text-error-light);
  background-color: var(--color-tooltip-bg-warning-light);  /* Same as claim ref tooltip */
  border: 1px solid var(--color-tooltip-border-error-light);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  
  /* Center the tooltip above the cursor */
  transform: translate(-50%, -100%);
  pointer-events: none;
}

/* Arrow pointing down (tooltip appears above) - Light mode */
.cm-ambiguous-term-tooltip::before {
  position: absolute;
  top: 100%;
  left: 50%;
  border-width: 5px 5px 0;
  border-style: solid;
  border-color: var(--color-tooltip-border-error-light) transparent transparent;
  transform: translateX(-50%);
  content: '';
}

/* Dark mode styles for ambiguous term tooltip */
[data-theme="dark"] .cm-ambiguous-term-tooltip {
  color: var(--color-tooltip-text-error);
  background-color: var(--color-tooltip-bg-subtle);
  border: 1px solid var(--color-tooltip-text-error);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Dark mode arrow */
[data-theme="dark"] .cm-ambiguous-term-tooltip::before {
  border-color: var(--color-tooltip-bg-subtle) transparent transparent;
}


/* Claim dependency tooltip - Matches ambiguous term tooltip style for consistency */
.cm-dependency-tooltip {
  position: fixed;
  z-index: 10000;
  display: none;
  min-width: 300px;
  max-width: 400px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.4;
  white-space: normal;
  
  /* Light mode colors - orange/warning theme for dependency issues */
  color: var(--color-tooltip-text-warning);
  background-color: var(--color-tooltip-bg-warning-light);
  border: 1px solid var(--color-tooltip-border-warning);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

/* Styling for the message content */
.cm-dependency-tooltip .tooltip-message {
  color: inherit;
}

.cm-dependency-tooltip .tooltip-line {
  margin-bottom: 4px;
  line-height: 1.3;
}

.cm-dependency-tooltip .tooltip-label {
  font-weight: 600;
  color: var(--color-tooltip-text-warning-label);
}

.cm-dependency-tooltip .tooltip-action {
  padding-top: 6px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-tooltip-text-warning);
  border-top: 1px solid rgba(251, 191, 36, 0.2);
  opacity: 0.9;
  font-style: italic;
}

/* Dark mode styles for dependency tooltip */
[data-theme="dark"] .cm-dependency-tooltip {
  color: var(--color-tooltip-text-warning-dark);
  background-color: var(--color-tooltip-bg-subtle);  /* Solid background matching article error tooltip */
  border: 1px solid var(--color-tooltip-text-warning-dark);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .cm-dependency-tooltip .tooltip-label {
  color: var(--color-tooltip-text-warning-label-dark);
}

[data-theme="dark"] .cm-dependency-tooltip .tooltip-action {
  border-top-color: rgba(251, 191, 36, 0.2);
  color: var(--color-tooltip-text-warning-dark);
}

/* =================================================================
   Base Styles - Reset
   ================================================================= */

/* Modern CSS Reset */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-main);

  /* Smooth theme transitions */
  transition: background-color var(--duration-normal) var(--ease-in-out),
              color var(--duration-normal) var(--ease-in-out);
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove default button styles */
button {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

/* Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Create a root stacking context */
#app {
  isolation: isolate;
}

/* Remove animations for people who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =================================================================
   Base Styles - Typography
   ================================================================= */


/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

h1 {
  margin-bottom: var(--spacing-6);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
}

h2 {
  margin-bottom: var(--spacing-5);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
}

h3 {
  margin-bottom: var(--spacing-4);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
}

h4 {
  margin-bottom: var(--spacing-3);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

h5 {
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
}

h6 {
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

/* Paragraphs */
p {
  margin-bottom: var(--spacing-4);
  line-height: var(--line-height-relaxed);
}

/* Links */
a {
  text-decoration: none;
  color: var(--color-terms-700);
  transition: var(--transition-colors);
}

a:hover {
  text-decoration: underline;
  color: var(--color-terms-800);
}

a:focus-visible {
  border-radius: var(--border-radius-sm);
  outline: 2px solid var(--color-terms-600);
  outline-offset: 2px;
}

/* Text utilities */

/* =================================================================
   Base Styles - Layout
   ================================================================= */

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: visible;
}

#app {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: visible;
}

/* Layout utilities */

/* =================================================================
   App-Specific Styles
   ================================================================= */

/* CodeMirror customization */
.CodeMirror {
  width: 100%;
  height: 100% !important;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  border-radius: var(--border-radius-lg);
}

.CodeMirror-scroll {
  min-height: 100%;
}

.CodeMirror-gutters {
  padding-right: var(--spacing-2) !important;
  background: transparent !important;
  border-right: var(--border-default) !important;
}

.CodeMirror-linenumber {
  padding: 0 var(--spacing-1) 0 var(--spacing-2) !important;
  color: var(--color-text-tertiary) !important;
}

/* Autocomplete styles */
.CodeMirror-hints {
  position: absolute;
  z-index: var(--z-index-dropdown);
  max-height: 20em;
  padding: var(--spacing-1) 0;
  margin: 0;
  overflow: hidden;
  overflow-y: auto;
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-dropdown);
  list-style: none;
}

.CodeMirror-hint {
  padding: var(--padding-button-sm);
  margin: 0;
  font-size: var(--font-size-sm);
  white-space: pre;
  color: var(--color-text-primary);
  cursor: pointer;
}

li.CodeMirror-hint-active {
  color: var(--color-text-primary);
  background: var(--color-bg-claims);
}

/* =================================================================
   Term Auto-scroll Flash Highlight Animation
   ================================================================= */

/* CodeMirror flash highlight */
.cm-flash-highlight {
  animation: flash-highlight 1.5s ease-out;
}

/* TipTap flash highlight */
.tt-flash-highlight {
  animation: flash-highlight 1.5s ease-out;
}

@keyframes flash-highlight {
  0% {
    background-color: var(--color-flash-highlight);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
  }
  100% {
    background-color: var(--color-flash-highlight-end);
    box-shadow: none;
  }
}

/* =================================================================
   Standardized Modal Button Styles
   ================================================================= */

/* Base button styles for modals */
.modal-button {
  padding: 0.5rem 1rem;
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-radius: 4px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.modal-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Accent button (primary action) - theme-aware */
.modal-button-accent {
  color: var(--color-button-accent-text);
  background-color: var(--color-button-accent-bg);
}

.modal-button-accent:hover:not(:disabled) {
  background-color: var(--color-button-accent-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--color-button-accent-bg-hover);
  opacity: 0.95;
}

/* Secondary button (alternate actions) - gray */
.modal-button-secondary {
  color: var(--color-button-secondary-text);
  background-color: var(--color-button-secondary-bg);
}

.modal-button-secondary:hover:not(:disabled) {
  background-color: var(--color-button-secondary-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
}

/* Danger button (delete/destructive actions) - red */
.modal-button-danger {
  color: var(--color-button-danger-text);
  background-color: var(--color-button-danger-bg);
}

.modal-button-danger:hover:not(:disabled) {
  background-color: var(--color-button-danger-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

/* Container styles */