/* ==================================================================
   SIAVER.CSS  -  OVERLAY DE MARCA (CSS_EMPRESA=siaver.css)
   ------------------------------------------------------------------
   Este archivo SOLO contiene los tokens propios de Siaver. Toda la
   capa semantica (surfaces, sombras, radios, tipografia, dark mode,
   etc.) vive en colors-base.css y se deriva automaticamente de los
   --brand-* que aqui se redefinen.

   Identidad Siaver:
     - Verde corporativo  #78ba73
     - Carbon corporativo #464545
     - Blanco como lienzo

   NOTA SOBRE EL VERDE  (importante, leer antes de tocar valores)
   ------------------------------------------------------------------
   #78ba73 sobre blanco da un contraste de 2.3:1. El sistema usa
   --brand-primary y --brand-accent tanto de color de texto (139 y 88
   usos en el CSS de la app) como de fondo con "color: #fff" encima,
   asi que un verde tan claro en esos tokens deja media aplicacion
   ilegible. Por eso:

     --brand-primary        #487F43  mismo tono (H=115) oscurecido,
                                     4.8:1 sobre blanco -> AA
     --brand-primary-light  #78ba73  EL VERDE EXACTO DE MARCA, para
                                     rellenos, hovers y superficies
                                     donde no hay texto pequeno encima

   El verde de marca sigue siendo el protagonista visual: pinta el
   item activo del sidebar, el subrayado del menu, los hovers del
   navbar y el hero del login. Lo que cambia es que el texto verde
   usa la version oscura del MISMO verde.
   ================================================================== */

:root {

    /* ============================================================
       1. MARCA Siaver
       ============================================================ */

    /* Verde corporativo. -light es el #78ba73 literal del manual. */
    --brand-primary:           #487F43;
    --brand-primary-light:     #78ba73;
    --brand-primary-dark:      #35602F;

    /* Carbon corporativo: estructura de la app (shell, texto fuerte).
       9.6:1 con blanco, asi que aguanta texto pequeno sin problema. */
    --brand-secondary:         #464545;
    --brand-secondary-light:   #6E6D6D;
    --brand-secondary-dark:    #2D2C2C;

    /* Tercer color: verde profundo. Siaver no tiene un tercer color
       de marca, asi que en vez de inventar uno (Knauf usa ambar) se
       usa un verde mas hondo como escalon de enfasis. Se lee como
       "mas importante" sin salirse de la paleta. 6.5:1 sobre blanco. */
    --brand-accent:            #2C6B28;
    --brand-accent-light:      #78ba73;
    --brand-accent-dark:       #1E4D1B;


    /* ============================================================
       2. DECISIONES ESPECIFICAS DE Siaver
       ------------------------------------------------------------
       Solo lo que difiere de la base. El resto se hereda.
       ============================================================ */

    /* Lienzo blanco: el blanco es color de marca, no un gris suave */
    --surface-canvas:          var(--white);
    --body-bg:                 var(--white);

    /* --success de base (#00ca72) es un verde menta bastante distinto
       del verde Siaver, asi que se mantiene: si se igualaran, "hecho"
       y "de marca" dejarian de distinguirse. --info se queda azul por
       el mismo motivo. */

    /* Gradiente de 3 paradas que firma cards, modales, tablas y el
       megamenu. El token se llama -knauf- porque vive en
       colors-base.css y lo consumen 10 hojas de estilo: se
       reescribe su valor, NO su nombre. Aqui recorre la paleta
       Siaver: verde de marca -> verde oscuro -> carbon. */
    --gradient-knauf-full:     linear-gradient(90deg,
                                    var(--brand-primary-light) 0%,
                                    var(--brand-primary)      55%,
                                    var(--brand-secondary)   100%);

    /* Mismo caso con las sombras "de marca": la base las tinta de azul
       Knauf (rgba(0,55,120)). Se retintan con el carbon Siaver para que
       la elevacion no meta un color ajeno a la paleta. */
    --shadow-knauf-md:         0  2px  6px rgba(70, 69, 69, 0.07),
                               0  6px 16px rgba(70, 69, 69, 0.11);
    --shadow-knauf-lg:         0  4px 12px rgba(70, 69, 69, 0.09),
                               0 12px 32px rgba(70, 69, 69, 0.15);
    --shadow-knauf-xl:         0  8px 20px rgba(70, 69, 69, 0.11),
                               0 24px 56px rgba(70, 69, 69, 0.19),
                               0  0   1px rgba(70, 69, 69, 0.20) inset;

    /* Navbar en carbon con texto blanco. El verde entra como hover:
       marca donde estas sin gritar. */
    --navbar-bg:               var(--brand-secondary);
    --navbar-text:             var(--white);
    --navbar-brand:            var(--white);
    --navbar-link:             var(--white);
    --navbar-link-hover:       var(--brand-primary-light);

    /* Sidebar un punto mas oscuro que el navbar para dar profundidad,
       con el activo en el verde exacto de marca. */
    --sidebar-bg:              var(--brand-secondary-dark);
    --sidebar-text:            var(--white);
    --sidebar-active:          var(--brand-primary-light);
    --sidebar-hover:           var(--brand-secondary);

    /* Menu horizontal en carbon, subrayado activo en verde */
    --menu-bg:                 var(--brand-secondary);
    --menu-text:               var(--white);
    --menu-active-border:      var(--brand-primary-light);
}