/**
* Diseño CDMX — design-system.css
* Tokens de diseño: colores, tipografía, espaciado.
* PARA CAMBIAR LA PALETA DEL SITIO: editar SOLO este archivo.
* No modificar main.css del theme Orbit.
*/

:root {
  /* ---- Paleta Diseño CDMX (grises / azules / sepias atenuados) ---- */
  --dc-gris-oscuro:  #2b3035;   /* headings, fondos oscuros */
  --dc-gris-medio:   #495057;   /* texto principal */
  --dc-gris-claro:   #adb5bd;   /* bordes, detalles */
  --dc-azul:         #5c7a99;   /* acento principal (botones, links, 3D) */
  --dc-azul-suave:   #8ba3bc;   /* hover, partículas secundarias */
  --dc-sepia:        #a68a64;   /* acento cálido (detalles, hovers) */
  --dc-sepia-suave:  #c9b499;   /* fondos sepia tenues */
  --dc-crema:        #f4f2ee;   /* fondo claro general */
  --dc-blanco:       #ffffff;

  /* ---- Override de variables globales del theme Orbit ---- */
  --background-color: var(--dc-crema);
  --default-color:    var(--dc-gris-medio);
  --heading-color:    var(--dc-gris-oscuro);
  --accent-color:     var(--dc-azul);
  --surface-color:    var(--dc-blanco);
  --contrast-color:   var(--dc-blanco);

  /* ---- Nav ---- */
  --nav-color:                    var(--dc-gris-medio);
  --nav-hover-color:              var(--dc-azul);
  --nav-mobile-background-color:  var(--dc-blanco);
  --nav-dropdown-background-color:var(--dc-blanco);
  --nav-dropdown-color:           var(--dc-gris-medio);
  --nav-dropdown-hover-color:     var(--dc-azul);

  /* ---- Tipografía ---- */
  --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --heading-font: "Noto Sans Mono", monospace; /* parche v1.2 */
  --nav-font:     "Noto Sans Mono", monospace; /* parche v1.2 */

  /* ---- Espaciado y forma ---- */
  --dc-radius:      10px;
  --dc-radius-lg:   18px;
  --dc-shadow-sm:   0 4px 14px rgba(43, 48, 53, 0.08);
  --dc-shadow-md:   0 10px 30px rgba(43, 48, 53, 0.12);
  --dc-transition:  all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Preset oscuro (hero y CTA) en tonos de la paleta */
.dark-background {
  --background-color: #23282d;
  --default-color:    #d7dade;
  --heading-color:    #ffffff;
  --surface-color:    #2f353b;
  --contrast-color:   #ffffff;
}

/* Preset sepia tenue (sección diferenciadores) */
.sepia-background {
  --background-color: #efe9df;
  --surface-color:    #ffffff;
}

/* ---- Hero con video (parche v1.1) ---- */
:root {
  /* Opacidad base del overlay blanco (0 a 1).
     0.45 = video visible y nodos blancos legibles.
     Subir hacia 0.6 si el video compite con el texto;
     bajar hacia 0.3 si los nodos blancos se pierden. */
  --dc-hero-overlay: 0.45;
}