/* Color variables - Light/Dark mode */
:root {
  color-scheme: light dark;

  /* Light mode (default) */
  --primary: #4285f4;
  --primary-rgb: 66 133 244;
  --primary-light: #4285f433;
  --primary-dark: #3367d6;

  --secondary: #ea580c;
  --secondary-rgb: 234 88 12;
  --secondary-light: #ea580c33;

  --bg: #f3f4f6;
  --bg-rgb: 243 244 246;
  --bg-secondary: #e5e7eb;
  --bg-tertiary: #d1d5db;
  --terminal-bg: #ffffff;

  --text: #1a1a1a;
  --text-rgb: 26 26 26;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --terminal-text: #1a1a1a;
  --title-color: #1a1a1a;
  --button-text: #1a1a1a;

  --border-color: #e5e7eb;
  --border-color-rgb: 229 231 235;
  --terminal-border: #e5e7eb;

  --tag-bg: #f3f4f6;
  --tag-text: #1a1a1a;

  --header-bg: rgba(249 250 251 / 0.9);
  --code-bg: #f3f4f6;

  /* Status colors */
  --success: #10b981;
  --success-rgb: 16 185 129;
  --success-light: #d1fae5;
  --success-dark: #065f46;

  --warning: #f59e0b;
  --warning-rgb: 245 158 11;
  --warning-light: #fef3c7;
  --warning-dark: #92400e;

  --danger: #ef4444;
  --danger-rgb: 239 68 68;
  --danger-light: #fee2e2;
  --danger-dark: #991b1b;

  --gray-light: #f3f4f6;
  --gray-dark: #374151;

  /* Terminal buttons */
  --btn-close: #ff5f56;
  --btn-minimize: #ffbd2e;
  --btn-expand: #27c93f;
}

/* Dark mode via class */
html.dark {
  --primary: #00ff9d;
  --primary-rgb: 0 255 157;
  --primary-light: #00ff9d33;
  --primary-dark: #00b8ff;

  --secondary: #00b8ff;
  --secondary-rgb: 0 184 255;
  --secondary-light: #00b8ff33;

  --bg: #0a0e17;
  --bg-rgb: 10 14 23;
  --bg-secondary: #161b22;
  --bg-tertiary: #21262d;
  --terminal-bg: #0d1117;

  --text: #e6e6e6;
  --text-rgb: 230 230 230;
  --text-secondary: #d1d5db;
  --text-tertiary: #6b7280;
  --terminal-text: #e6e6e6;
  --title-color: #ffffff;
  --button-text: #e6e6e6;

  --border-color: rgba(255 255 255 / 0.1);
  --border-color-rgb: 255 255 255;
  --terminal-border: rgba(255 255 255 / 0.1);

  --tag-bg: #161b22;
  --tag-text: #e6e6e6;

  --header-bg: rgba(22 27 34 / 0.9);
  --code-bg: #161b22;

  /* Status colors - dark mode */
  --success-light: #064e3b;
  --success-dark: #d1fae5;

  --warning-light: #78350f;
  --warning-dark: #fef3c7;

  --danger-light: #7f1d1d;
  --danger-dark: #fee2e2;

  --gray-light: #1f2937;
  --gray-dark: #e5e7eb;
}

/* System preference dark mode */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --primary: #00ff9d;
    --primary-rgb: 0 255 157;
    --primary-light: #00ff9d33;
    --primary-dark: #00b8ff;

    --secondary: #00b8ff;
    --secondary-rgb: 0 184 255;
    --secondary-light: #00b8ff33;

    --bg: #0a0e17;
    --bg-rgb: 10 14 23;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --terminal-bg: #0d1117;

    --text: #e6e6e6;
    --text-rgb: 230 230 230;
    --text-secondary: #d1d5db;
    --text-tertiary: #6b7280;
    --terminal-text: #e6e6e6;
    --title-color: #ffffff;
    --button-text: #e6e6e6;

    --border-color: rgba(255 255 255 / 0.1);
    --border-color-rgb: 255 255 255;
    --terminal-border: rgba(255 255 255 / 0.1);

    --tag-bg: #161b22;
    --tag-text: #e6e6e6;

    --header-bg: rgba(22 27 34 / 0.9);
    --code-bg: #161b22;

    --success-light: #064e3b;
    --success-dark: #d1fae5;

    --warning-light: #78350f;
    --warning-dark: #fef3c7;

    --danger-light: #7f1d1d;
    --danger-dark: #fee2e2;

    --gray-light: #1f2937;
    --gray-dark: #e5e7eb;
  }
}
