/**
 * CSS Custom Properties (Variables)
 * Curriculum Vitae - Maurizio Pelizzone
 *
 * Centralizes all design tokens for easy maintenance
 */

:root {
  /* === COLORS === */
  /* Primary palette */
  --color-primary: #3498db;
  --color-primary-light: #e3f2fd;
  --color-primary-dark: #1976d2;

  /* Neutral colors */
  --color-dark: #2c3e50;
  --color-secondary: #34495e;
  --color-gray: #7f8c8d;
  --color-gray-light: #e0e0e0;

  /* Text colors */
  --color-text: #333;
  --color-text-light: #555;
  --color-text-muted: #666;

  /* Background colors */
  --color-bg-body: #f5f5f5;
  --color-bg-white: #ffffff;
  --color-bg-light: #f8f9fa;
  --color-bg-card: #f8f9fa;

  /* Accent colors */
  --color-accent-light: #ecf0f1;
  --color-highlight-bg: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
  --color-header-gradient: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);

  /* === SPACING === */
  --spacing-xs: 5px;
  --spacing-sm: 8px;
  --spacing-md: 8px;
  --spacing-lg: 15px;
  --spacing-xl: 20px;
  --spacing-2xl: 25px;
  --spacing-3xl: 30px;

  /* === TYPOGRAPHY === */
  /* Font families */
  --font-family-base: "Montserrat", Verdana, sans-serif;

  /* Fluid font sizes using clamp() */
  --font-size-base: clamp(0.9rem, 1.5vw, 1rem);
  --font-size-small: clamp(0.8rem, 1.2vw, 0.9rem);
  --font-size-tiny: clamp(0.75rem, 1vw, 0.85rem);

  --font-size-h1: clamp(1.8rem, 4vw, 2.5rem);
  --font-size-h2: clamp(1.2rem, 3vw, 1.5rem);
  --font-size-h3: clamp(1rem, 2vw, 1.2rem);
  --font-size-h4: clamp(0.95rem, 1.8vw, 1.1rem);

  /* Line heights */
  --line-height-base: 1.6;
  --line-height-relaxed: 1.7;
  --line-height-loose: 1.8;

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* === LAYOUT === */
  /* Container widths */
  --container-max-width-desktop: 1100px;
  --container-max-width-print: 210mm;

  /* Breakpoints (for reference in media queries) */
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1099px;

  /* === BORDERS & RADIUS === */
  --border-radius-sm: 5px;
  --border-radius-md: 8px;
  --border-radius-lg: 10px;
  --border-radius-full: 50%;
  --border-radius-pill: 15px;

  --border-width: 1px;
  --border-width-thick: 2px;
  --border-width-heavy: 3px;
  --border-width-card: 4px;

  --border-color-light: #e0e0e0;
  --border-color-primary: var(--color-primary);

  /* === SHADOWS === */
  --shadow-sm: 0 0 10px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 0 20px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-timeline: 0 0 0 2px #e0e0e0;

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

  /* === Z-INDEX LAYERS === */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 100;
  --z-fixed: 1000;
  --z-modal: 9999;
}

/* === PRINT-SPECIFIC VARIABLES === */
@media print {
  :root {
    /* Optimize for print */
    --container-max-width-desktop: 100%;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;

    /* Simplify colors for B&W printing */
    --color-bg-body: white;
    --color-bg-light: white;
    --color-bg-card: white;
  }
}