:root {
  /* Default variables - these act as fallbacks if a specific theme doesn't define them */
  --color-body-bg: #1f2937;
  --color-text-primary: #fff;
  --color-text-secondary: #e5e7eb;
  --color-link: #60a5fa;
  --color-link-hover: #3b82f6;
  --color-bg-navbar: #111827;
  --color-bg-navbar-rgb: 17, 24, 39;
  --color-bg-content-section: #1f2937;
  --color-bg-card: #2d3748;
  --color-heading-main: #f9fafb;
  --color-heading-card: #93c5fd;
  --color-input-bg: #374151;
  --color-input-text: #e5e7eb;
  --color-input-border: #4b5563;
  --color-placeholder: #9ca3af;
  --color-button-text: #ffffff;
  --color-button-blue-bg: #3b82f6;
  --color-button-blue-hover: #2563eb;
  --color-button-green-bg: #10b981;
  --color-button-green-hover: #059669;
  --color-button-red-bg: #ef4444;
  --color-button-red-hover: #dc2626;
  --color-button-purple-bg: #9333ea;
  --color-button-purple-hover: #7e22ce;
  --color-button-yellow-bg: #fbbf24;
  --color-button-yellow-hover: #d97706;
  --color-button-orange-bg: #f97316;
  --color-button-orange-hover: #ea580c;
  --color-button-indigo-bg: #6366f1;
  --color-button-indigo-hover: #4f46e5;
  --color-table-th-bg: #1f2937;
  --color-table-th-text: #e5e7eb;
  --color-table-td-border: #4b5563;
  --color-table-row-even-bg: #374151;
  --color-modal-bg: #2d3748;
  --color-modal-text: #e5e7eb;
    --color-message-box-bg-success: #4caf50;
    --color-message-box-bg-error: #f44336;
  --font-family-body: "Inter", sans-serif;
  --color-hero-shadow: rgba(0, 0, 0, 0.7);
  --color-border-ip-box: #4B5563;
  --color-btn-bg: #2563eb;
  --color-btn-text: #fff;
  --color-btn-hover-bg: #1d4ed8;
  --color-btn-hover-text: #fff;
  --color-btn-active-bg: #1e40af;
  --color-btn-active-text: #fff;
}

body, html {
  color: var(--color-text-primary, #fff);
}
.theme-dark {
  --color-body-bg: #1f2937;
  --color-text-primary: #f9fafb;
  --color-text-secondary: #d1d5db;
  --color-link: #3b82f6;
  --color-link-hover: #2563eb;
  --color-link-rgb: 59, 130, 246;
  --color-bg-navbar: #111827;
  --color-bg-navbar-rgb: 17, 24, 39;
  --color-bg-content-section: #1f2937;
  --color-bg-card: #374151;
  --color-heading-main: #f9fafb;
  --color-heading-card: #60a5fa;
  --color-input-bg: #374151;
  --color-input-text: #f9fafb;
  --color-input-border: #4b5563;
  --color-placeholder: #9ca3af;
  --color-button-text: #ffffff;
  --color-button-blue-bg: #3b82f6;
  --color-button-blue-hover: #2563eb;
  --color-button-green-bg: #10b981;
  --color-button-green-hover: #059669;
  --color-button-red-bg: #ef4444;
  --color-button-red-hover: #dc2626;
  --color-button-purple-bg: #9333ea;
  --color-button-purple-hover: #7e22ce;
  --color-button-yellow-bg: #fbbf24;
  --color-button-yellow-hover: #d97706;
  --color-button-orange-bg: #f97316;
  --color-button-orange-hover: #ea580c;
  --color-button-indigo-bg: #6366f1;
  --color-button-indigo-hover: #4f46e5;
  --color-table-th-bg: #374151;
  --color-table-th-text: #f9fafb;
  --color-table-td-border: #4b5563;
  --color-table-row-even-bg: #4b5563;
  --color-modal-bg: #374151;
  --color-modal-text: #f9fafb;
  --color-modal-input-bg: #4b5563;
  --color-modal-input-text: #e5e7eb;
  --color-message-box-bg-success: #4caf50;
  --color-message-box-bg-error: #f44336;
  --font-family-body: "Inter", sans-serif;
  --color-hero-shadow: rgba(0, 0, 0, 0.7);
}
.theme-light {
  --color-body-bg: #f3f4f6;
  --color-text-primary: #1f2937;
  --color-text-secondary: #6b7280;
  --color-link: #2563eb;
  --color-link-hover: #1d4ed8;
  --color-link-rgb: 37, 99, 235;
  --color-bg-navbar: #ffffff;
  --color-bg-navbar-rgb: 255, 255, 255;
  --color-bg-content-section: #f3f4f6;
  --color-bg-card: #ffffff;
  --color-heading-main: #111827;
  --color-heading-card: #3b82f6;
  --color-input-bg: #ffffff;
  --color-input-text: #1f2937;
  --color-input-border: #d1d5db;
  --color-placeholder: #9ca3af;
  --color-button-text: #ffffff;
  --color-button-blue-bg: #3b82f6;
  --color-button-blue-hover: #2563eb;
  --color-button-green-bg: #10b981;
  --color-button-green-hover: #059669;
  --color-button-red-bg: #ef4444;
  --color-button-red-hover: #dc2626;
  --color-button-purple-bg: #9333ea;
  --color-button-purple-hover: #7e22ce;
  --color-button-yellow-bg: #fbbf24;
  --color-button-yellow-hover: #d97706;
  --color-button-orange-bg: #f97316;
  --color-button-orange-hover: #ea580c;
  --color-button-indigo-bg: #6366f1;
  --color-button-indigo-hover: #4f46e5;
  --color-table-th-bg: #e5e7eb;
  --color-table-th-text: #111827;
  --color-table-td-border: #d1d5db;
  --color-table-row-even-bg: #f9fafb;
  --color-modal-bg: #ffffff;
  --color-modal-text: #1f2937;
  --color-modal-input-bg: #f3f4f6;
  --color-modal-input-text: #1f2937;
  --color-message-box-bg-success: #4caf50;
  --color-message-box-bg-error: #f44336;
  --font-family-body: "Inter", sans-serif;
  --color-hero-shadow: rgba(0, 0, 0, 0.25);
}

/* New Theme: Arcator Green */
.theme-arcator-green {
  --color-body-bg: #1a3e2f; /* Dark Green */
  --color-text-primary: #ebfbeb; /* Light Off-White */
  --color-text-secondary: #a3c7b5; /* Muted Green */
  --color-link: #34d399; /* Green Link */
  --color-link-hover: #10b981; /* Darker Green Link Hover */
  --color-link-rgb: 52, 211, 153;
  --color-bg-navbar: #1a2e1a;
  --color-bg-navbar-rgb: 26, 46, 26;
  --color-bg-content-section: #1a3e2f; /* Dark Green Content */
  --color-bg-card: #254d3d; /* Slightly Lighter Dark Green Card */
  --color-heading-main: #dcfce7; /* Very Light Green Heading */
  --color-heading-card: #6ee7b7; /* Light Green Heading */
  --color-input-bg: #305c4d; /* Greenish Input Background */
  --color-input-text: #ebfbeb; /* Light Input Text */
  --color-input-border: #4c7c6d; /* Muted Green Border */
  --color-placeholder: #7ca090; /* Even More Muted Green Placeholder */
  --color-button-text: #ffffff;
  --color-button-blue-bg: #34d399; /* Matches link green */
  --color-button-blue-hover: #10b981;
  --color-button-green-bg: #059669; /* Darker green */
  --color-button-green-hover: #047857;
  --color-button-red-bg: #f87171; /* Softer red */
  --color-button-red-hover: #ef4444;
  --color-button-purple-bg: #a78bfa;
  --color-button-purple-hover: #8b5cf6;
  --color-button-yellow-bg: #fbbf24;
  --color-button-yellow-hover: #d97706;
  --color-button-orange-bg: #f97316;
  --color-button-orange-hover: #ea580c;
  --color-button-indigo-bg: #6366f1;
  --color-button-indigo-hover: #4f46e5;
  --color-table-th-bg: #1a3e2f;
  --color-table-th-text: #ebfbeb;
  --color-table-td-border: #4c7c6d;
  --color-table-row-even-bg: #2c5242; /* Slightly different green for even rows */
  --color-modal-bg: #254d3d;
  --color-modal-text: #ebfbeb;
  --color-modal-input-bg: #305c4d;
  --color-modal-input-text: #ebfbeb;
  --color-message-box-bg-success: #34d399;
  --color-message-box-bg-error: #f87171;
  --font-family-body: "Inter", sans-serif; /* Default to Inter */
  --color-hero-shadow: rgba(0, 0, 0, 0.6);
}
.theme-ocean-blue {
  --color-body-bg: #0a192f; /* Deep Blue */
  --color-text-primary: #e0f2f7; /* Light Blue/Cyan */
  --color-text-secondary: #7abacd; /* Muted Cyan */
  --color-link: #29b6f6; /* Bright Blue Link */
  --color-link-hover: #03a9f4; /* Darker Blue Link Hover */
  --color-link-rgb: 41, 182, 246;
  --color-bg-navbar: #1e293b;
  --color-bg-navbar-rgb: 30, 41, 59;
  --color-bg-content-section: #0a192f; /* Deep Blue Content */
  --color-bg-card: #1a2f4b; /* Slightly Lighter Deep Blue Card */
  --color-heading-main: #add8e6; /* Light Blue Heading */
  --color-heading-card: #81d4fa; /* Sky Blue Heading */
  --color-input-bg: #203e5f; /* Blueish Input Background */
  --color-input-text: #e0f2f7; /* Light Input Text */
  --color-input-border: #3a5f8a; /* Muted Blue Border */
  --color-placeholder: #608ba0; /* Even More Muted Blue Placeholder */
  --color-button-text: #ffffff;
  --color-button-blue-bg: #29b6f6; /* Matches link blue */
  --color-button-blue-hover: #03a9f4;
  --color-button-green-bg: #4caf50; /* Standard green */
  --color-button-green-hover: #43a047;
  --color-button-red-bg: #ef5350; /* Standard red */
  --color-button-red-hover: #e53935;
  --color-button-purple-bg: #7e57c2;
  --color-button-purple-hover: #673ab7;
  --color-button-yellow-bg: #ffd54f;
  --color-button-yellow-hover: #ffc107;
  --color-button-orange-bg: #ff8a65;
  --color-button-orange-hover: #ff7043;
  --color-button-indigo-bg: #4f46e5;
  --color-button-indigo-hover: #4338ca;
  --color-table-th-bg: #0a192f;
  --color-table-th-text: #e0f2f7;
  --color-table-td-border: #3a5f8a;
  --color-table-row-even-bg: #142b47; /* Slightly different blue for even rows */
  --color-modal-bg: #1a2f4b;
  --color-modal-text: #e0f2f7;
  --color-modal-input-bg: #203e5f;
  --color-modal-input-text: #e0f2f7;
  --color-message-box-bg-success: #29b6f6;
  --color-message-box-bg-error: #ef5350;
  --font-family-body: "Inter", sans-serif; /* Default to Inter */
  --color-hero-shadow: rgba(0, 0, 0, 0.6);
}
.theme-high-contrast {
  --color-body-bg: #000000;
  --color-text-primary: #ffffff;
  --color-text-secondary: #f5f5f5;
  --color-link: #ffff00; /* Yellow */
  --color-link-hover: #ffd700; /* Gold */
  --color-link-rgb: 255, 255, 0;
  --color-bg-navbar: #000000;
  --color-bg-navbar-rgb: 0, 0, 0;
  --color-bg-content-section: #111111;
  --color-bg-card: #333333;
  --color-heading-main: #ffffff;
  --color-heading-card: #ffffff;
  --color-input-bg: #333333;
  --color-input-text: #ffffff;
  --color-input-border: #ffff00; /* Yellow border */
  --color-placeholder: #cccccc;
  --color-button-text: #000000; /* Black text on bright buttons */
  --color-button-blue-bg: #ffff00;
  --color-button-blue-hover: #ffd700;
  --color-button-green-bg: #00ff00;
  --color-button-green-hover: #00cc00;
  --color-button-red-bg: #ff0000;
  --color-button-red-hover: #cc0000;
  --color-button-purple-bg: #ff00ff;
  --color-button-purple-hover: #cc00cc;
  --color-button-yellow-bg: #ffff00;
  --color-button-yellow-hover: #ffd700;
  --color-button-orange-bg: #ffa500;
  --color-button-orange-hover: #cc8400;
  --color-button-indigo-bg: #4b0082; /* Dark Indigo */
  --color-button-indigo-hover: #3a0066; /* Darker Indigo */
  --color-table-th-bg: #000000;
  --color-table-th-text: #ffffff;
  --color-table-td-border: #ffffff;
  --color-table-row-even-bg: #111111;
  --color-modal-bg: #333333;
  --color-modal-text: #ffffff;
  --color-modal-input-bg: #111111;
  --color-modal-input-text: #ffffff;
  --color-message-box-bg-success: #00ff00;
  --color-message-box-bg-error: #ff0000;
  --font-family-body: "Inter", sans-serif; /* Default to Inter */
  --color-hero-shadow: #000;
}
.pattern-dots {
  background-image:
    radial-gradient(var(--color-text-secondary) 1px, transparent 1px),
    radial-gradient(var(--color-text-secondary) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position:
    0 0,
    10px 10px;
}
.pattern-grid {
  background-image:
    linear-gradient(to right, var(--color-text-secondary) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-text-secondary) 1px, transparent 1px);
  background-size: 20px 20px;
}