:root {
  /* Light theme (original colors from your styles) */
  --color-background: #f9fafb;
  --color-content-bg: #fff;
  --color-border: #e1e4e8;
  --color-text-primary: #333;
  --color-text-secondary: #666;
  --color-button-bg: #3498db;
  --color-button-hover: #2980b9;
  --color-button-shadow: rgba(52, 152, 219, 0.3);
  --color-button-hover-shadow: rgba(41, 128, 185, 0.5);
  --color-footer-text: #999;
  --color-info-bg: #f5f8fa;
  --color-nav-bg: #3498db;
  --color-input-bg: #fff;
  --color-input-border: #d1d9e6;
  --color-input-focus: #3498db;

  /* Social sharing variables - Light theme */
  --social-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --social-hover-shadow-x: 0 4px 8px rgba(0, 0, 0, 0.2);
  --social-hover-shadow-facebook: 0 4px 8px rgba(66, 103, 178, 0.2);
  --share-prompt-color: #000000;
  --share-prompt-bg: transparent;
  --color-x-bg: #000000;
  --color-x-hover: #1a1a1a;
  --color-facebook-bg: #4267B2;
  --color-facebook-hover: #3b5a9a;

  /* Font and spacing variables */
  --font-family-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-weight-bold: 600;
  --font-size-h1: 2.5rem;
  --font-size-h2: 1.8rem;
  --font-size-button: 1rem;
  --border-radius-main: 12px;
  --border-radius-button: 8px;
  --box-shadow-main: 0 8px 20px rgba(0, 0, 0, 0.1);
  --border-radius-social: 4px;
}

[data-theme="dark"] {
  /* Dark theme variables */
  --color-background: #1a1a2e;
  --color-content-bg: #16213e;
  --color-border: #0f3460;
  --color-text-primary: #e6e6e6;
  --color-text-secondary: #a8a8a8;
  --color-button-bg: #533d8b;
  --color-button-hover: #3a2a62;
  --color-button-shadow: rgba(0, 0, 0, 0.3);
  --color-button-hover-shadow: rgba(0, 0, 0, 0.4);
  --color-footer-text: #a8a8a8;
  --color-info-bg: #0f3460;
  --color-nav-bg: #533d8b;
  --color-input-bg: #225797;
  --color-input-border: #533d8b;
  --color-input-focus: #8a6fc1;

  /* Social sharing variables - Dark theme */
  --social-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  --social-hover-shadow-x: 0 4px 8px rgba(0, 0, 0, 0.4);
  --social-hover-shadow-facebook: 0 4px 8px rgba(66, 103, 178, 0.4);
  --share-prompt-color: #ffffff;
  --share-prompt-bg: rgba(0, 0, 0, 0.2);
  --color-x-bg: #000000;
  --color-x-hover: #333333;
  --color-facebook-bg: #4267B2;
  --color-facebook-hover: #3b5a9a;
}

html:not(.theme-loaded) {
  visibility: hidden;
}

html.theme-loaded {
  visibility: visible;
  transition: visibility 0s;
}