@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600&family=Nunito+Sans:wght@400;700;900&family=Roboto+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600&display=swap');

:root {
  color-scheme: only light;   
  
  --abismo: #0B3140;   
  --ambar:  #E9A227;   
  --mar:    #2A6E7E;   
  --duna:   #DCD6C8;   
  --crema:  #F6F4EF;   

  --ambar-fuerte: #C9860F;   

  
  --grafito:          var(--abismo);
  --grafito-medio:    #14424F;
  --dorado:           var(--ambar-fuerte);
  --dorado-claro:     var(--ambar);
  --naranja:          var(--ambar);
  --naranja-fuerte:   var(--ambar-fuerte);
  --principal:        var(--abismo);
  --acento:           var(--ambar);
  --acento-fuerte:    var(--ambar-fuerte);

  --texto:            #14262E;
  --texto-suave:      #4B6068;
  --texto-claro:      var(--crema);
  --fondo:            #FFFFFF;
  --fondo-alterno:    var(--crema);
  --borde:            var(--duna);

  --ok:               #1F7A4D;
  --error:            #A32020;

  --tipo-titulos: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --tipo-texto:   'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --tipo-datos:   'Roboto Mono', ui-monospace, Consolas, monospace;

  --redondeo:       8px;
  --redondeo-chico: 6px;
  --sombra:         0 2px 14px rgba(11, 49, 64, .08);
  --ancho-maximo:   1140px;
}