/* ==========================================================================
   SISTEMA DE COLORES Y DISEÑO - PORTFOLIO FADU
   ==========================================================================
   Este archivo centraliza la paleta de colores del portfolio.
   Para cambiar la estética visual de la web, edita los valores de las variables aquí.
   ========================================================================== */

:root {
    /* ----------------------------------------------------------------------
       1. TEMA CLARO (Default - Estilo Editorial Papel Técnico)
       ---------------------------------------------------------------------- */
    
    /* Fondos (Profundidad) */
    --bg-primary: #fcfbfa;       /* Papel Canson de dibujo / Blanco cálido suave */
    --bg-secondary: #ffffff;     /* Tarjetas, menú lateral y contenedores flotantes */
    --bg-tertiary: #f3f1ed;      /* Contraste suave, hovers y tramas geométricas */
    
    /* Tipografía (Jerarquía) */
    --text-primary: #111317;     /* Carbón profundo para máxima legibilidad y look editorial */
    --text-secondary: #535862;   /* Gris grafito para descripción y cuerpo de texto */
    --text-muted: #8a909c;       /* Gris medio para etiquetas técnicas, flechas e índices */
    
    /* Color de Acento (Interacción y Foco) */
    --accent: #ff5533;           /* Naranja Proyectual FADU (Tinta Rotring / Lápiz corrector) */
    --accent-dim: rgba(255, 85, 51, 0.08); /* Fondo con tinte de acento suave para resaltados */
    
    /* Líneas Técnicas y Separadores */
    --border-color: rgba(0, 0, 0, 0.07);   /* Línea de grafito fina para divisiones estructurales */
    --grid-color: rgba(0, 0, 0, 0.025);    /* Grilla de fondo que simula papel milimetrado */
    --overlay-bg: rgba(252, 251, 250, 0.85); /* Fondo desenfocado translúcido para overlays y modales */

    /* ----------------------------------------------------------------------
       2. PARÁMETROS ESTRUCTURALES
       ---------------------------------------------------------------------- */
    --sidebar-width: 280px;
    --transition-smooth: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 
   ----------------------------------------------------------------------
   3. TEMA OSCURO (Para referencia y restauración)
   ----------------------------------------------------------------------
   Si deseas volver al modo oscuro clásico, puedes copiar y reemplazar 
   los valores de :root de arriba con estos:

   --bg-primary: #0a0b0d;
   --bg-secondary: #131518;
   --bg-tertiary: #191c20;
   --text-primary: #f1f3f5;
   --text-secondary: #9da5b0;
   --text-muted: #5e6671;
   --accent: #ff5533;
   --accent-dim: rgba(255, 85, 51, 0.15);
   --border-color: rgba(255, 255, 255, 0.08);
   --grid-color: rgba(255, 255, 255, 0.02);
   --overlay-bg: rgba(10, 11, 13, 0.9);
*/