/* CSS Custom Properties for Theming */

:root {
  /* Color Palette - Retro Theme (Default) */
  --color-primary: #55ccff;
  --color-secondary: #3366ff;
  --color-background: #000000;
  --color-background-secondary: #000033;
  --color-background-tertiary: #000077;
  --color-background-quaternary: #0000bb;
  --color-text: #eeeeee;
  --color-text-secondary: #ffffff;
  --color-text-muted: #999999;

  /* Links */
  --color-link: #00ffff;
  --color-link-visited: #55ccff;
  --color-link-hover: #ddffff;
  --color-link-active: #000000;

  /* Buttons */
  --color-button: #FFDD55;
  --color-button-text: #333333;
  --color-button-hover: #ffcc33;
  --color-button-active: #ffbb11;

  /* Forms */
  --color-form-background: #000000;
  --color-form-border: #AAAAFF;
  --color-form-border-secondary: #AAFFAA;
  --color-form-border-tertiary: #FFAAFF;
  --color-form-border-quaternary: #FFAAAA;
  --color-form-text: #DDFFFF;
  --color-form-text-secondary: #DDFFDD;
  --color-form-text-tertiary: #FFDDFF;

  /* Status Colors */
  --color-success: #00dd44;
  --color-error: #ff6666;
  --color-warning: #ffaa00;
  --color-info: #55ccff;

  /* Comments */
  --color-comment-link: #00dd44;

  /* Additional Retro Colors */
  --color-autor: #ff3456;
  --color-autor-hover: #ff9abc;
  --color-fecha: #66ff00;
  --color-visitas: #dede44;
  --color-numero: #ffff00;
  --color-numero-1k: #ff8f00;
  --color-cabecera: #9999ff;
  --color-cabecera-dia: #dd66ee;
  --color-seccion: #dddd00;
  --color-opciones: #44dd44;
  --color-tituloizq: #99ff99;
  --color-lenlace: #88eeff;

  /* Typography */
  --font-family-base: geneva, arial, Verdana, Helvetica;
  --font-family-heading: Verdana, Helvetica;
  --font-size-xs: 6px;
  --font-size-sm: 10px;
  --font-size-base: 12px;
  --font-size-md: 13px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-xxl: 24px;

  --line-height-base: 1.5;
  --line-height-tight: 1.2;
  --line-height-loose: 1.8;

  /* Spacing Scale */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing-md: 1rem;       /* 16px */
  --spacing-lg: 1.5rem;     /* 24px */
  --spacing-xl: 2rem;       /* 32px */
  --spacing-xxl: 3rem;      /* 48px */

  /* Borders */
  --border-width: 2px;
  --border-width-thin: 1px;
  --border-width-thick: 3px;
  --border-style: outset;
  --border-style-inset: inset;
  --border-radius: 0;

  /* Layout */
  --container-max-width: 1200px;
  --container-padding: var(--spacing-md);
  --sidebar-width: 250px;
  --header-height: 60px;
  --footer-height: 40px;

  /* Z-index Scale */
  --z-index-base: 1;
  --z-index-dropdown: 100;
  --z-index-sticky: 200;
  --z-index-modal: 300;
  --z-index-tooltip: 400;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Shadows */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* Theme: Retro (Default) */
[data-theme="retro"] {
  /* Same as root, explicitly set for clarity */
  --color-primary: #55ccff;
  --color-secondary: #3366ff;
  --color-background: #000000;
  --color-link: #00ffff;
  --color-link-hover: #ddffff;
  --color-button: #FFDD55;
  --color-button-text: #333333;
}

/* Future themes can override variables here */
[data-theme="modern"] {
  /* Example modern theme - to be implemented */
}