/* ==========================================================================
   Design Tokens - Nombres semánticos
   ========================================================================== */

:root {
  /* Colors - Theme Base */
  --c-bg-primary: #ffffff;
  --c-bg-inverse: #000000;
  --c-bg-overlay: rgba(0, 0, 0, 0.8);
  
  /* Colors - Text */
  --c-text-primary: #000000;
  --c-text-inverse: #ffffff;
  --c-text-secondary: #a0a0a0;
  --c-text-hover: #888888;
  
  /* Colors - Borders & Accents */
  --c-border-light: #555555;
  --c-border-dark: #333333;
  --c-transparent: transparent;

  /* Typography */
  --font-primary: 'Montserrat', sans-serif; /* Body and general text */
  --font-secondary: 'Josefin Sans', sans-serif; /* Subtitles, elegant accents */
  --font-display: 'Anton', sans-serif; /* Big headers, structural links */

  /* Colors - Tool Page (Private Dashboard) - isolated to avoid conflict, but standardized */
  --tool-primary-color: #0052cc;
  --tool-primary-hover: #0065ff;
  --tool-danger-color: #de350b;
  --tool-danger-hover: #bf2600;
  --tool-border-color: #dfe1e6;
  --tool-bg-light: #f4f5f7;
  --tool-bg-white: #ffffff;
  --tool-text-dark: #172b4d;
  --tool-text-light: #5e6c84;
  --tool-shadow: rgba(0, 0, 0, 0.1);

  /* Spacing Tokens */
  --space-xs: 8px;
  --space-sm: 15px;
  --space-md: 20px;
  --space-lg: 30px;
  --space-xl: 40px;
  --space-xxl: 60px;

  /* Z-Index Hierarchy */
  --z-welcome: 100;
  --z-nav: 101;
  --z-controls: 102;
  --z-overlay-backdrop: 200;
  --z-overlay-content: 201;
  --z-cookie: 999;
}