:root {
  /* ========================================
     PRIMARY COLORS
     ======================================== */
  --fai-primary-color: #3b82f6;
  --fai-primary-hover: #2563eb;
  --fai-primary-active: #1d4ed8;

  /* Glassmorphism plan badge colors */
  --fai-plan-badge-color: #3b82f6;
  --fai-plan-badge-color-dark: #60a5fa;

  /* ========================================
     BACKGROUND COLORS
     ======================================== */
  --fai-bg-primary: #0f172a;
  --fai-bg-secondary: rgba(15, 23, 42, 0.6);
  --fai-bg-tertiary: rgba(30, 41, 59, 0.5);

  /* Dark mode backgrounds */
  --fai-bg-primary-dark: #0f172a;
  --fai-bg-secondary-dark: rgba(15, 23, 42, 0.7);
  --fai-bg-tertiary-dark: rgba(30, 41, 59, 0.6);

  /* Extra dark backgrounds for deeply nested elements */
  --fai-bg-quaternary-dark: rgba(3, 7, 18, 0.9);
  --fai-bg-quinary-dark: rgba(15, 23, 42, 0.7);

  /* Slate color palette for UI components */
  --fai-slate-700: #334155;
  --fai-slate-800: #1e293b;
  --fai-slate-900: #0f172a;
  --fai-slate-950: #020617;

  /* Slate colors with opacity */
  --fai-slate-700-20: rgba(51, 65, 85, 0.2);
  --fai-slate-700-30: rgba(51, 65, 85, 0.3);
  --fai-slate-700-70: rgba(51, 65, 85, 0.7);
  --fai-slate-800-40: rgba(30, 41, 59, 0.4);
  --fai-slate-800-60: rgba(30, 41, 59, 0.6);
  --fai-slate-800-70: rgba(30, 41, 59, 0.7);
  --fai-slate-800-80: rgba(30, 41, 59, 0.8);
  --fai-slate-800-90: rgba(30, 41, 59, 0.9);
  --fai-slate-900-30: rgba(15, 23, 42, 0.3);
  --fai-slate-900-50: rgba(15, 23, 42, 0.5);
  --fai-slate-900-70: rgba(15, 23, 42, 0.7);
  --fai-slate-900-80: rgba(15, 23, 42, 0.8);
  --fai-slate-900-90: rgba(15, 23, 42, 0.9);
  --fai-slate-900-95: rgba(15, 23, 42, 0.95);
  --fai-slate-950-80: rgba(2, 6, 23, 0.8);
  --fai-slate-950-90: rgba(2, 6, 23, 0.9);
  --fai-slate-950-95: rgba(2, 6, 23, 0.95);

  /* White and black with custom opacity */
  --fai-white-2: rgba(255, 255, 255, 0.02);
  --fai-white-10: rgba(255, 255, 255, 0.1);
  --fai-white-20: rgba(255, 255, 255, 0.2);
  --fai-black-10: rgba(0, 0, 0, 0.1);

  /* ========================================
     TEXT COLORS
     ======================================== */
  --fai-text-primary: #ffffff;
  --fai-text-secondary: #9ca3af;
  --fai-text-tertiary: #7d8694;

  /* Dark mode text */
  --fai-text-primary-dark: #ffffff;
  --fai-text-secondary-dark: #d1d5db;
  --fai-text-tertiary-dark: #9ca3af;

  /* ========================================
     BORDER COLORS
     ======================================== */
  --fai-border-light: rgba(71, 85, 105, 0.3);
  --fai-border-medium: rgba(71, 85, 105, 0.4);
  --fai-border-dark: rgba(71, 85, 105, 0.5);
  --fai-border-default: rgba(71, 85, 105, 0.2);
  --fai-border-focus: #3b82f6;
  --fai-border-error: #7f1d1d;
  --fai-border-accent: rgba(96, 165, 250, 0.25);
  --fai-border-success: rgba(74, 222, 128, 0.25);
  --fai-border-subtle: rgba(71, 85, 105, 0.15);

  /* Dark mode borders */
  --fai-border-light-dark: rgba(71, 85, 105, 0.35);
  --fai-border-medium-dark: rgba(71, 85, 105, 0.45);
  --fai-border-dark-dark: rgba(71, 85, 105, 0.55);

  /* ========================================
     GRAY COLOR SCALE
     ======================================== */
  --fai-gray-50: #f9fafb;
  --fai-gray-100: #f3f4f6;
  --fai-gray-200: #e5e7eb;
  --fai-gray-300: #d1d5db;
  --fai-gray-400: #9ca3af;
  --fai-gray-500: #6b7280;
  --fai-gray-600: #4b5563;
  --fai-gray-700: #374151;
  --fai-gray-800: #1f2937;
  --fai-gray-900: #111827;

  /* ========================================
     SEMANTIC COLORS
     ======================================== */

  /* Accent colors */
  --fai-accent-primary: #3b82f6;
  --fai-accent-primary-hover: #2563eb;
  --fai-accent-disabled: #4b5563;

  /* Success */
  --fai-success-color: #10b981;
  --fai-success-bg: #d1fae5;
  --fai-success-border: #a7f3d0;
  --fai-success-text-light: #4ade80;

  /* Warning */
  --fai-warning-color: #f59e0b;
  --fai-warning-bg: #fef3c7;
  --fai-warning-border: #fde68a;

  /* Danger/Error */
  --fai-danger-color: #ef4444;
  --fai-danger-bg: #fef2f2;
  --fai-danger-border: #fecaca;
  --fai-danger-hover: #dc2626;

  /* Orange (for intermediate warning states) */
  --fai-orange-color: #f97316;
  --fai-orange-hover: #ea580c;

  /* Magenta/Purple (for intersection and overlap states) */
  --fai-magenta-color: #c026d3;
  --fai-magenta-hover: #a21caf;
  --fai-magenta-color-dark: #d946ef;
  --fai-magenta-hover-dark: #e879f9;

  /* Danger dark mode */
  --fai-danger-bg-dark: #7f1d1d;
  --fai-danger-border-dark: #991b1b;
  --fai-danger-text-light: #fca5a5;
  --fai-danger-text-lighter: #fecaca;
  --fai-danger-bg-light: #fee2e2;
  --fai-danger-bg-lighter: #fef2f2;

  /* Status colors */
  --fai-status-error: #ef4444;
  --fai-status-error-bg: rgba(127, 29, 29, 0.2);
  --fai-text-error: #fca5a5;

  /* Progress status colors for usage indicators */
  --fai-status-critical: #ef4444;
  --fai-status-critical-light: #f87171;
  --fai-status-critical-dark: #dc2626;
  --fai-status-warning-primary: #f59e0b;
  --fai-status-warning-secondary: #f97316;
  --fai-status-caution: #fbbf24;
  --fai-status-caution-light: #fde047;
  --fai-status-good: #10b981;
  --fai-status-good-light: #34d399;
  --fai-status-optimal: #14b8a6;

  /* Tier badge colors */
  --fai-tier-platinum-start: #cbd5e1;
  --fai-tier-platinum-end: #94a3b8;
  --fai-tier-gold-start: #fbbf24;
  --fai-tier-gold-end: #eab308;
  --fai-tier-silver-start: #d1d5db;
  --fai-tier-silver-end: #9ca3af;
  --fai-tier-bronze-start: #fb923c;
  --fai-tier-bronze-end: #f59e0b;

  /* Recording indicator */
  --fai-recording-active: #ef4444;
  --fai-recording-hover: #dc2626;

  /* Primary backgrounds */
  --fai-primary-bg-light: #dbeafe;
  --fai-primary-bg-lighter: #eff6ff;

  /* Info */
  --fai-info-color: #3b82f6;
  --fai-info-bg: #dbeafe;
  --fai-info-border: #bfdbfe;

  /* Preview (Tool preview mode) */
  --fai-preview-color: #3b82f6;
  --fai-preview-color-light: #60a5fa;
  --fai-preview-color-dark: #2563eb;
  --fai-preview-opacity: 0.4;
  --fai-preview-line-dash: 4px;

  /* Tool Overlays */
  --fai-cursor-color: #f59e0b;
  --fai-position-line-color: #10b981;
  --fai-range-highlight-color: rgba(59, 130, 246, 0.15);
  --fai-range-highlight-color-dark: rgba(96, 165, 250, 0.15);
  --fai-overlay-label-bg: rgba(0, 0, 0, 0.8);
  --fai-overlay-label-text: #ffffff;

  /* ========================================
     COMPONENT-SPECIFIC COLORS
     ======================================== */

  /* Seek bar / Progress bar */
  --fai-seekbar-bg: #e5e7eb;
  --fai-seekbar-bg-dark: #374151;
  --fai-seekbar-progress: var(--fai-primary-color);
  --fai-seekbar-handle: #ffffff;
  --fai-seekbar-handle-border: var(--fai-primary-color);

  /* Timeline */
  --fai-timeline-bg: #ffffff;
  --fai-timeline-bg-dark: #1f2937;
  --fai-timeline-grid: #e5e7eb;
  --fai-timeline-grid-dark: #374151;
  --fai-timeline-cursor: #ef4444;
  --fai-timeline-action: var(--fai-primary-color);
  --fai-timeline-action-selected: #fbbf24;
  --fai-timeline-action-hover: var(--fai-primary-hover);

  /* Drawing panel */
  --fai-drawing-active: #10b981;
  --fai-drawing-handle: var(--fai-primary-color);

  /* Volume slider */
  --fai-volume-filled: var(--fai-primary-color);
  --fai-volume-empty: #e5e7eb;
  --fai-volume-empty-dark: #4b5563;

  /* ScriptOverview speed colors */
  --fai-speed-slow: var(--fai-success-color);
  --fai-speed-medium: var(--fai-warning-color);
  --fai-speed-fast: var(--fai-orange-color);
  --fai-speed-very-fast: var(--fai-danger-color);

  /* Tooltip */
  --fai-tooltip-bg: var(--fai-overlay-bg-darkest);
  --fai-tooltip-text: #ffffff;

  /* ========================================
     SPACING & SIZING
     ======================================== */
  --fai-radius: 8px;
  --fai-border-radius-sm: 4px;
  --fai-border-radius-md: 6px;
  --fai-border-radius-lg: 8px;
  --fai-border-radius-xl: 12px;
  --fai-border-radius-2xl: 16px;
  --fai-rounded-full: 50%;

  /* Container and max width */
  --fai-spacing-container: 1.5rem;
  --fai-max-width: 1200px;

  /* Base spacing scale */
  --fai-spacing-0: 0;
  --fai-spacing-px: 1px;
  --fai-spacing-0_5: 0.125rem;     /* 2px */
  --fai-spacing-0_75: 0.1875rem;   /* 3px */
  --fai-spacing-1: 0.25rem;        /* 4px */
  --fai-spacing-1_5: 0.375rem;     /* 6px */
  --fai-spacing-2: 0.5rem;         /* 8px */
  --fai-spacing-2_5: 0.625rem;     /* 10px */
  --fai-spacing-3: 0.75rem;        /* 12px */
  --fai-spacing-3_5: 0.875rem;     /* 14px */
  --fai-spacing-4: 1rem;           /* 16px */
  --fai-spacing-5: 1.25rem;        /* 20px */
  --fai-spacing-6: 1.5rem;         /* 24px */
  --fai-spacing-7: 1.75rem;        /* 28px */
  --fai-spacing-8: 2rem;           /* 32px */
  --fai-spacing-10: 2.5rem;        /* 40px */
  --fai-spacing-12: 3rem;          /* 48px */
  --fai-spacing-14: 3.5rem;        /* 56px */
  --fai-spacing-16: 4rem;          /* 64px */
  --fai-spacing-20: 5rem;          /* 80px */

  /* Legacy spacing (backwards compat) */
  --fai-spacing-xs: 0.25rem;
  --fai-spacing-sm: 0.5rem;
  --fai-spacing-md: 0.75rem;
  --fai-spacing-lg: 1rem;
  --fai-spacing-xl: 1.5rem;

  /* Gap scale */
  --fai-gap-0: 0;
  --fai-gap-0_25: 0.0625rem;   /* 1px */
  --fai-gap-0_5: 0.125rem;     /* 2px */
  --fai-gap-2px: 2px;          /* 2px - exact pixel value */
  --fai-gap-xs: 0.25rem;       /* 4px */
  --fai-gap-1_5: 0.375rem;     /* 6px */
  --fai-gap-sm: 0.5rem;        /* 8px */
  --fai-gap-md: 0.75rem;       /* 12px */
  --fai-gap-3_5: 0.875rem;     /* 14px */
  --fai-gap-lg: 1rem;          /* 16px */
  --fai-gap-xl: 1.5rem;        /* 24px */

  /* Min sizes */
  --fai-min-w-0: 0;
  --fai-min-w-8: 2rem;
  --fai-min-w-9: 2.25rem;
  --fai-min-w-10: 2.5rem;
  --fai-min-w-11: 2.75rem;
  --fai-min-w-12: 3rem;
  --fai-min-w-14: 3.5rem;
  --fai-min-w-16: 4rem;
  --fai-min-w-20: 5rem;
  --fai-min-w-24: 6rem;
  --fai-min-w-30: 7.5rem;
  --fai-min-w-40: 10rem;
  --fai-min-w-45px: 45px;      /* Exact pixel value for buttons */
  --fai-min-w-48: 12rem;
  --fai-min-w-220px: 220px;    /* Voice message bubble min width */

  --fai-min-h-0: 0;
  --fai-min-h-7: 1.75rem;
  --fai-min-h-9: 2.25rem;
  --fai-min-h-10: 2.5rem;
  --fai-min-h-11: 2.75rem;
  --fai-min-h-12: 3rem;
  --fai-min-h-14: 3.5rem;

  /* Max sizes */
  --fai-max-w-xs: 20rem;
  --fai-max-w-sm: 24rem;
  --fai-max-w-md: 28rem;
  --fai-max-w-lg: 32rem;
  --fai-max-w-xl: 36rem;
  --fai-max-w-2xl: 42rem;
  --fai-max-w-300px: 300px;    /* Voice message bubble max width */

  /* Max height */
  --fai-max-h-80vh: 80vh;      /* Modal max height */
  --fai-max-h-calc-80vh-80px: calc(80vh - 80px); /* Dialog content area */

  /* Height percentages */
  --fai-h-full: 100%;
  --fai-h-screen: 100vh;
  --fai-h-80vh: 80vh;

  /* Width percentages */
  --fai-w-full: 100%;
  --fai-w-9-10: 90%;
  --fai-w-20pct: 20%;
  --fai-w-75pct: 75%;
  --fai-w-80pct: 80%;

  /* Common sizes */
  --fai-full: 100%;
  --fai-1-2: 50%;

  /* Specific icon/element sizes */
  --fai-size-3_5: 0.875rem;    /* 14px - small icon */
  --fai-size-4_5: 1.125rem;    /* 18px - icon size */
  --fai-size-5_5: 1.375rem;    /* 22px */
  --fai-size-9: 2.25rem;       /* 36px */
  --fai-size-10: 2.5rem;       /* 40px */
  --fai-size-17_5: 4.375rem;   /* 70px */

  /* Media query breakpoints */
  --fai-breakpoint-xs: 400px;
  --fai-breakpoint-sm: 560px;
  --fai-breakpoint-md: 768px;
  --fai-breakpoint-lg: 1024px;
  --fai-breakpoint-xl: 1280px;

  /* ========================================
     SHADOWS
     ======================================== */
  --fai-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --fai-shadow-sm-strong: 0 2px 4px rgba(0, 0, 0, 0.3);
  --fai-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --fai-shadow-md-strong: 0 4px 6px rgba(0, 0, 0, 0.3);
  --fai-shadow-md-combined: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --fai-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --fai-shadow-lg-strong: 0 10px 25px rgba(0, 0, 0, 0.3);
  --fai-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.4);
  --fai-shadow-2xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  --fai-shadow-sm-dark: 0 1px 2px rgba(0, 0, 0, 0.3);
  --fai-shadow-md-dark: 0 4px 6px rgba(0, 0, 0, 0.4);
  --fai-shadow-lg-dark: 0 10px 15px rgba(0, 0, 0, 0.5);
  --fai-shadow-xl-dark: 0 20px 60px rgba(0, 0, 0, 0.6);

  /* Glassmorphism shadows */
  --fai-glass-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --fai-glass-shadow-dark: 0 2px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);

  /* Focus/Selection shadows */
  --fai-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.2);
  --fai-shadow-focus-active: 0 0 0 3px rgba(37, 99, 235, 0.3);
  --fai-shadow-glow: 0 0 4px rgba(0, 0, 0, 0.5);
  --fai-shadow-glow-primary: 0 0 20px rgba(59, 130, 246, 0.3);
  --fai-shadow-glow-primary-dark: 0 0 20px rgba(96, 165, 250, 0.4);

  /* Overlay/backdrop backgrounds */
  --fai-overlay-bg: rgba(0, 0, 0, 0.6);
  --fai-overlay-bg-medium: rgba(0, 0, 0, 0.5);
  --fai-overlay-bg-light: rgba(0, 0, 0, 0.05);
  --fai-overlay-bg-dark: rgba(0, 0, 0, 0.7);
  --fai-overlay-bg-darker: rgba(0, 0, 0, 0.8);
  --fai-overlay-bg-darkest: rgba(0, 0, 0, 0.9);
  --fai-overlay-bg-semi: rgba(0, 0, 0, 0.4);
  --fai-overlay-bg-light-dark: rgba(255, 255, 255, 0.1);
  --fai-overlay-bg-white: rgba(255, 255, 255, 0.8);
  --fai-overlay-bg-gray: rgba(31, 41, 55, 0.8);
  --fai-overlay-border: rgba(255, 255, 255, 0.3);

  /* Glassmorphism backgrounds */
  --fai-glass-bg-light: rgba(255, 255, 255, 0.6);
  --fai-glass-bg-dark: rgba(255, 255, 255, 0.08);
  --fai-glass-inset-light: rgba(255, 255, 255, 0.8);
  --fai-glass-inset-dark: rgba(255, 255, 255, 0.1);

  /* Transparent primary colors */
  --fai-primary-transparent: rgba(59, 130, 246, 0.95);
  --fai-primary-transparent-hover: rgba(37, 99, 235, 0.95);
  --fai-primary-transparent-light: rgba(59, 130, 246, 0.2);
  --fai-primary-transparent-lighter: rgba(59, 130, 246, 0.1);
  --fai-primary-transparent-lightest: rgba(59, 130, 246, 0.05);
  --fai-primary-transparent-medium: rgba(59, 130, 246, 0.6);

  /* Transparent success colors */
  --fai-success-transparent-light: rgba(34, 197, 94, 0.3);
  --fai-success-transparent-lighter: rgba(34, 197, 94, 0.15);
  --fai-success-transparent-lightest: rgba(34, 197, 94, 0.1);

  /* Transparent danger colors */
  --fai-danger-transparent-light: rgba(239, 68, 68, 0.2);
  --fai-danger-transparent-lighter: rgba(239, 68, 68, 0.15);
  --fai-danger-transparent-lightest: rgba(239, 68, 68, 0.1);

  /* Transparent magenta colors */
  --fai-magenta-transparent-light: rgba(192, 38, 211, 0.2);
  --fai-magenta-transparent-lighter: rgba(192, 38, 211, 0.1);
  --fai-magenta-transparent-lightest: rgba(192, 38, 211, 0.05);
  --fai-magenta-transparent-light-dark: rgba(217, 70, 239, 0.2);
  --fai-magenta-transparent-lighter-dark: rgba(217, 70, 239, 0.15);
  --fai-magenta-transparent-lightest-dark: rgba(217, 70, 239, 0.08);

  /* Gradient overlays for drawing */
  --fai-gradient-danger-primary: linear-gradient(to bottom, rgba(127, 29, 29, 0.2) 0%, rgba(30, 58, 138, 0.2) 100%);
  --fai-gradient-danger-primary-hover: linear-gradient(to bottom, rgba(127, 29, 29, 0.3) 0%, rgba(30, 58, 138, 0.3) 100%);

  /* ========================================
     TYPOGRAPHY
     ======================================== */
  --fai-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fai-font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;

  /* Font sizes - rem scale */
  --fai-font-size-3xs: 0.4375rem;   /* 7px */
  --fai-font-size-2xs: 0.5625rem;   /* 9px */
  --fai-font-size-xs: 0.75rem;      /* 12px */
  --fai-font-size-sm: 0.875rem;     /* 14px */
  --fai-font-size-base: 1rem;       /* 16px */
  --fai-font-size-md: 1rem;         /* 16px */
  --fai-font-size-lg: 1.125rem;     /* 18px */
  --fai-font-size-xl: 1.25rem;      /* 20px */
  --fai-font-size-2xl: 1.5rem;      /* 24px */
  --fai-font-size-3xl: 2.25rem;     /* 36px */

  /* Specific fractional sizes used in Timeline */
  --fai-font-size-0_5: 0.5rem;       /* 8px */
  --fai-font-size-0_625: 0.625rem;   /* 10px */
  --fai-font-size-0_6875: 0.6875rem; /* 11px */
  --fai-font-size-0_8125: 0.8125rem; /* 13px */
  --fai-font-size-0_9375: 0.9375rem; /* 15px */

  /* Pixel-based font sizes for components */
  --fai-font-size-10px: 10px;        /* Badge/label text */
  --fai-font-size-11px: 11px;        /* Timestamp text */
  --fai-font-size-15px: 15px;        /* Chat message text */

  /* Font weights */
  --fai-font-weight-normal: 400;
  --fai-font-weight-medium: 500;
  --fai-font-weight-semibold: 600;
  --fai-font-weight-bold: 700;

  /* Line heights */
  --fai-line-height-none: 1;
  --fai-line-height-tight: 1.25;
  --fai-line-height-normal: 1.5;
  --fai-line-height-relaxed: 1.75;

  /* Letter spacing */
  --fai-letter-spacing-tight: -0.025em;
  --fai-letter-spacing-normal: 0;
  --fai-letter-spacing-0_02: 0.02em;
  --fai-letter-spacing-wide: 0.025em;
  --fai-letter-spacing-wider: 0.05em;
  --fai-letter-spacing-widest: 0.1em;

  /* ========================================
     TRANSITIONS
     ======================================== */
  --fai-transition-fast: 0.1s ease;
  --fai-transition-normal: 0.15s ease;
  --fai-transition-slow: 0.3s ease;

  /* Specific transition durations */
  --fai-duration-75: 75ms;
  --fai-duration-100: 100ms;
  --fai-duration-150: 150ms;
  --fai-duration-200: 200ms;
  --fai-duration-300: 300ms;
  --fai-duration-500: 500ms;
  --fai-duration-600: 600ms;
  --fai-duration-fast: 0.6s;
  --fai-duration-700: 700ms;
  --fai-duration-1000: 1000ms;
  --fai-duration-1s: 1s;

  /* Transition properties */
  --fai-transition-all: all;
  --fai-transition-bg: background-color;
  --fai-transition-color: color;
  --fai-transition-transform: transform;
  --fai-transition-opacity: opacity;

  /* Timing functions */
  --fai-ease-linear: linear;
  --fai-ease-in: ease-in;
  --fai-ease-out: ease-out;
  --fai-ease-in-out: ease-in-out;

  /* ========================================
     EFFECTS
     ======================================== */

  /* Opacity */
  --fai-opacity-0: 0;
  --fai-opacity-10: 0.1;
  --fai-opacity-20: 0.2;
  --fai-opacity-25: 0.25;
  --fai-opacity-30: 0.3;
  --fai-opacity-35: 0.35;
  --fai-opacity-40: 0.4;
  --fai-opacity-50: 0.5;
  --fai-opacity-60: 0.6;
  --fai-opacity-70: 0.7;
  --fai-opacity-75: 0.75;
  --fai-opacity-80: 0.8;
  --fai-opacity-90: 0.9;
  --fai-opacity-95: 0.95;
  --fai-opacity-100: 1;

  /* Tool Background Animation Opacity */
  --fai-tool-bg-animation-opacity: 0.35;
  --fai-tool-bg-gradient-start: 0.08;
  --fai-tool-bg-gradient-mid: 0.12;
  --fai-tool-bg-gradient-end: 0.15;

  /* Backdrop blur */
  --fai-blur-none: 0;
  --fai-blur-sm: blur(4px);
  --fai-blur-md: blur(8px);
  --fai-blur-lg: blur(12px);
  --fai-blur-xl: blur(16px);
  --fai-blur-2xl: blur(24px);

  /* Transform scales */
  --fai-scale-0: 0;
  --fai-scale-50: 0.5;
  --fai-scale-75: 0.75;
  --fai-scale-90: 0.9;
  --fai-scale-95: 0.95;
  --fai-scale-100: 1;
  --fai-scale-105: 1.05;
  --fai-scale-110: 1.1;
  --fai-scale-125: 1.25;
  --fai-scale-150: 1.5;

  /* Transform translate */
  --fai-translate-y-0: 0;
  --fai-translate-y-neg-1: -1px;
  --fai-translate-y-1: 1px;
  --fai-translate-y-2: 2px;
  --fai-translate-y-1-2: -50%;
  --fai-translate-x-1-2: -50%;

  /* Transform rotate */
  --fai-rotate-360: 360deg;

  /* ========================================
     Z-INDEX LAYERS
     ======================================== */
  --fai-z-base: 0;
  --fai-z-1: 1;
  --fai-z-10: 10;
  --fai-z-20: 20;
  --fai-z-50: 50;
  --fai-z-100: 100;
  --fai-z-dropdown: 1000;
  --fai-z-modal: 2000;
  --fai-z-tooltip: 3000;
  --fai-z-toast: 4000;

  /* ========================================
     BUTTON STYLES
     ======================================== */
  --fai-btn-bg: rgba(51, 65, 85, 0.4);
  --fai-btn-bg-hover: rgba(51, 65, 85, 0.6);
  --fai-btn-border: rgba(71, 85, 105, 0.3);
  --fai-btn-text: var(--fai-text-primary);

  --fai-btn-bg-dark: rgba(51, 65, 85, 0.5);
  --fai-btn-bg-hover-dark: rgba(51, 65, 85, 0.7);
  --fai-btn-border-dark: rgba(71, 85, 105, 0.35);
  --fai-btn-text-dark: var(--fai-text-primary-dark);

  --fai-btn-primary-bg: var(--fai-primary-color);
  --fai-btn-primary-bg-hover: var(--fai-primary-hover);
  --fai-btn-primary-text: #ffffff;

  /* ========================================
     INPUT STYLES
     ======================================== */
  --fai-input-bg: rgba(3, 7, 18, 0.8);
  --fai-input-bg-dark: rgba(3, 7, 18, 0.9);
  --fai-input-border: rgba(71, 85, 105, 0.2);
  --fai-input-border-dark: rgba(71, 85, 105, 0.25);
  --fai-input-border-focus: var(--fai-primary-color);
  --fai-input-text: var(--fai-text-primary);
  --fai-input-text-dark: var(--fai-text-primary-dark);
  --fai-input-placeholder: var(--fai-text-tertiary);
  --fai-input-placeholder-dark: var(--fai-text-tertiary-dark);

  /* ========================================
     SCROLLBAR STYLES
     ======================================== */
  --fai-scrollbar-width: 8px;
  --fai-scrollbar-track-bg: var(--fai-bg-secondary);
  --fai-scrollbar-track-bg-dark: var(--fai-bg-quaternary-dark);
  --fai-scrollbar-thumb-bg: var(--fai-border-medium);
  --fai-scrollbar-thumb-bg-dark: var(--fai-border-medium-dark);
  --fai-scrollbar-thumb-hover-bg: var(--fai-border-dark);
  --fai-scrollbar-thumb-hover-bg-dark: var(--fai-border-dark-dark);
  --fai-scrollbar-thumb-radius: 4px;
}

/* ========================================
   SCROLLBAR STYLES - DARK THEME
   ======================================== */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(51, 65, 85, 0.4) rgba(15, 23, 42, 0.2);
}

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(51, 65, 85, 0.4);
  border-radius: 4px;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(51, 65, 85, 0.6);
}

::-webkit-scrollbar-thumb:active {
  background: rgba(51, 65, 85, 0.8);
}

/* Scrollbar corner */
::-webkit-scrollbar-corner {
  background: rgba(15, 23, 42, 0.2);
}