/**
 * ROUGESWORLD - Core Variables
 * Global CSS variables for the Matrix-themed website
 */

:root {
  /* Typography */
  --font-matrix: 'VT323', monospace;
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  /* Alias usati da page-components.css (ex assets/css/components.css) */
  --font-primary: var(--font-display);
  --font-mono: var(--font-matrix);

  /* Scala di spaziatura — richiesta da page-components.css */
  --spacing-xs: 0.25rem;  /* 4px */
  --spacing-sm: 0.5rem;   /* 8px */
  --spacing-md: 1rem;     /* 16px */
  --spacing-lg: 1.5rem;   /* 24px */
  --spacing-xl: 2rem;     /* 32px */

  /* Font Sizes */
  --text-xs: 0.75rem;   /* 12px */
  --text-sm: 0.875rem;  /* 14px */
  --text-md: 1rem;      /* 16px */
  --text-lg: 1.125rem;  /* 18px */
  --text-xl: 1.25rem;   /* 20px */
  --text-2xl: 1.5rem;   /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem;  /* 36px */
  --text-5xl: 3rem;     /* 48px */
  
  /* Colors - Matrix Theme */
  --matrix-black: #000000;
  --matrix-dark: #001100;
  --matrix-green: #00ff00;
  --matrix-green-dim: #00aa00;
  --matrix-green-bright: #66ff66;
  --matrix-green-glow: rgba(0, 255, 0, 0.5);
  /* Alias usati da profile.css — mantenuti per compatibilità */
  --matrix-dark-green: var(--matrix-green-dim);
  --matrix-light-green: var(--matrix-green-bright);

  /* Colors - Cyberpunk Theme */
  --cyber-blue: #00d4ff;
  --cyber-blue-light: #66e0ff;
  --cyber-blue-glow: rgba(0, 212, 255, 0.5);
  --cyber-pink: #ff007f;
  --cyber-pink-glow: rgba(255, 0, 127, 0.5);
  --cyber-purple: #8000ff;
  --cyber-purple-glow: rgba(128, 0, 255, 0.5);
  --cyber-orange: #ff6600;
  --cyber-orange-glow: rgba(255, 102, 0, 0.5);
  --cyber-purple-light: #b366ff;

  /* Colors - Tron Theme (sezione Software) */
  --tron-blue: #00d4ff;
  --tron-blue-light: #7de3ff;
  --tron-blue-glow: rgba(0, 212, 255, 0.5);
  --tron-light-blue: #a8ecff;
  --tron-dark-blue: #003a52;
  --tron-white: #e8fbff;

  /* Base Colors */
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --text-primary: #ffffff;
  --text-secondary: #aaaaaa;
  
  /* Z-Index Layers */
  --z-background: -1;
  --z-content: 1;
  --z-overlay: 10;
  --z-modal: 100;
  --z-nav: 50;
  --z-oracle: 75;
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 255, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 255, 0, 0.1), 0 2px 4px rgba(0, 255, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 255, 0, 0.1), 0 4px 6px rgba(0, 255, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 255, 0, 0.1), 0 10px 10px rgba(0, 255, 0, 0.04);
  
  /* Borders */
  --border-thin: 1px solid var(--matrix-green-dim);
  --border-regular: 2px solid var(--matrix-green);
  --border-thick: 3px solid var(--matrix-green-bright);
  
  /* Border Radius */
  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
}

/* Dark Mode Overrides (Default) */
@media (prefers-color-scheme: dark) {
  :root {
    /* Already dark by default */
  }
}

/* Light Mode Overrides (Optional) */
@media (prefers-color-scheme: light) {
  :root {
    --bg-primary: #000000; /* Keep dark for Matrix theme */
    --bg-secondary: #0a0a0a;
    --text-primary: #ffffff;
    --text-secondary: #aaaaaa;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  :root {
    --matrix-green: #00ff00;
    --matrix-green-dim: #00cc00;
    --text-primary: #ffffff;
    --text-secondary: #dddddd;
    --border-thin: 2px solid var(--matrix-green);
    --border-regular: 3px solid var(--matrix-green);
    --border-thick: 4px solid var(--matrix-green);
  }
}